Jump to content

clear both


etsted
 Share

Recommended Posts

this is my style.css, and the ids refers to divs, but i cant make the bottomDiv clear:both. And it stacks above some of my elements

 

body { margin: 0px; }/* topDiv */ /* #topDiv, the main top div */ #topDiv{ height: 90px; background-color: #00ff00; margin: 0px; padding: 0px; border: 0px; } /* used to design the logo */ #topDiv > #Logo{ margin-left: 30px; float: left; width: 120px; height: 90px; } /* used inside the first div of topDiv */ #topDiv > #inside1_topDiv { height: 45px; margin-top: 20px; margin-right: 50px; float: right; } /* use this to change the links that are inside #inside1_topDiv */ #topDiv > #inside1_topDiv > a{ margin: 20px; color: #004000; } /* use this to change the hover state of links that are inside #inside1_topDiv */ #topDiv > #inside1_topDiv > a:hover{ margin: 20px; color: #ffffff; } /* used inside the second div of topDiv */ #topDiv > #inside2_topDiv { height: 45px; margin-left: 20px; border: 1px solid red; float: left; } /* use this to change the links that are inside #inside2_topDiv */ #topDiv > #inside2_topDiv > a{ margin: 20px; color: #004000; } /* use this to change the hover state of links that are inside #inside2_topDiv */ #topDiv > #inside2_topDiv > a:hover{ margin: 20px; color: #ffffff; }/* topDiv *//* middleDiv */#middleDiv{ height: 600px;}/* middleDiv *//* bottomDiv */#bottomDiv{ text-align: center; color: #00ff00; clear:both; border: 5px solid red; margin-bottom: 0px; padding: 24px;}/* bottomDiv */

Link to comment
Share on other sites

<?php                  // this already includes a connection to the DB, and a session_start()        // also check to see if a user i logged in        //        include_once "check_user.php";                  // this stores error messages redirected from other pages         $msg = "";         if(isset($_GET['msg']))         {            $msg = $_GET['msg'];         } ?>                       <!-- contains !DOCTYPE and all of the header elements -->            <?php include_once "header_function.php"; echo header_function("Home page");?>                    <!-- template_topDiv.php also includes a <body> and </head> tag -->            <?php include_once "template_topDiv.php";?>                        <div id="middleDiv">                <?php echo $msg;?>                                            </div>                        <!-- template_bottomDiv.php includes both </body> and </html> -->            <?php include_once "template_bottomDiv.php"; // this include the <div id="bottomDiv"></div>
Link to comment
Share on other sites

<body><div id='topDiv'> <!-- Main Top Div --><!-- logo image/link --><div id='Logo'><a href='index.php'><img src='images/logo.png' height='90' width='120' alt='logo' border='0'></a></div><div id='inside1_topDiv'><a href='user.php?u=victor'> victor </a> &nbsp; | &nbsp; <a href='logout.php'>Log Out</a> </div><div id='inside2_topDiv'><a href='index.php'>Home</a><a href="notifications.php" title="Your notifications and friend requests"><img src="images/note_still.png" width="22" height="12" alt="Notes"></a><a href='upload.php?u=victor'>Upload</a> </div><span style='margin-left: 30%';>Hello victor, lastlogin: 2014-04-26</span> </div> <!-- Main Top Div --> <div id="middleDiv"> </div><!-- template_bottomDiv.php includes both </body> and </html> --><div id="bottomDiv">bottom text</div></body></html>

Link to comment
Share on other sites

I don't see any problem with bottomDiv. All I see is a problem with topDiv. You had a fixed height on the topDiv and you didn't have overflow:hidden. I don't know what you want it to do at various window widths but if you apply some borders you can look at it and make adjustments. I don't know if you want to apply a min-width but that might help.

<!DOCTYPE html><html><head><meta charset="utf-8"><title>etsted</title><style>body { margin: 0px; }#topDiv{ /*height: 90px;*/ background-color: #00ff00; margin: 0px; padding: 0px; border: 0px;overflow:hidden;}#topDiv > #Logo{ margin-left: 30px; float: left; width: 120px; height: 90px;border:1px dotted #555;}#topDiv > #inside1_topDiv { height: 45px; margin-top: 20px; margin-right: 50px; float: right;border:1px dotted #555;}#topDiv > #inside1_topDiv > a{ margin: 20px; color: #004000;}#topDiv > #inside1_topDiv > a:hover{ margin: 20px; color: #ffffff;}#topDiv > #inside2_topDiv { height: 45px; margin-left: 20px; border: 1px solid red; float: left;}#topDiv > #inside2_topDiv > a{ margin: 20px; color: #004000;}#topDiv > #inside2_topDiv > a:hover{ margin: 20px; color: #ffffff;}#middleDiv{ height: 600px;}#bottomDiv{ text-align: center; color: #00ff00; clear:both; border: 5px solid red; margin-bottom: 0px; padding: 24px;}</style></head><body><div id='topDiv'> <!-- Main Top Div --><!-- logo image/link --><div id='Logo'><a href='index.php'><img src='images/logo.png' height='90' width='120' alt='logo' border='0'></a></div><div id='inside1_topDiv'><a href='user.php?u=victor'> victor </a>   |   <a href='logout.php'>Log Out</a></div><div id='inside2_topDiv'><a href='index.php'>Home</a><a href="notifications.php" title="Your notifications and friend requests"><img src="images/note_still.png" width="22" height="12" alt="Notes"></a><a href='upload.php?u=victor'>Upload</a></div><span style='margin-left: 30%;border:1px dotted #555;'>Hello victor, lastlogin: 2014-04-26</span></div> <!-- Main Top Div --><div id="middleDiv">Middle div</div><!-- template_bottomDiv.php includes both </body> and </html> --><div id="bottomDiv">bottom div</div></body></html></html>
Link to comment
Share on other sites

my bottomDiv is still not able to clear:both, whats wrong?

 

When I look at post#6 I can't see any problem with the middleDiv or bottomDiv so you will have to explain or provide a screenshot of the problem.

 

(except my html end-tag is duplicated)

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...