etsted Posted April 26, 2014 Share Posted April 26, 2014 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 More sharing options...
davej Posted April 26, 2014 Share Posted April 26, 2014 You need to post a link or include the HTML, and use the <> codeblock. Are you sure you have the id set? <div id="bottomDiv"></div> Link to comment Share on other sites More sharing options...
etsted Posted April 26, 2014 Author Share Posted April 26, 2014 <?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 More sharing options...
davej Posted April 26, 2014 Share Posted April 26, 2014 I need to see the HTML, not the Php. Do a "view source" on your page and then copy and post that code. Link to comment Share on other sites More sharing options...
etsted Posted April 27, 2014 Author Share Posted April 27, 2014 <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%';>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 More sharing options...
davej Posted April 27, 2014 Share Posted April 27, 2014 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 More sharing options...
etsted Posted April 27, 2014 Author Share Posted April 27, 2014 my bottomDiv is still not able to clear:both, whats wrong? Link to comment Share on other sites More sharing options...
dsonesuk Posted April 27, 2014 Share Posted April 27, 2014 It does! act as clear: both; it even acts as clear: both'; without clear: both; even being used, what do you think should happen? what browser are you using? have you cleared history and re- loaded/freshed. should point out: post#5 <span style='margin-left: 30%';> post#6 </html></html> Link to comment Share on other sites More sharing options...
davej Posted April 27, 2014 Share Posted April 27, 2014 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now