computer Posted September 16, 2010 Share Posted September 16, 2010 Hi fellas, am trying to create a div element with three columns. the first two give me no problems, but when I insert the third column, its content is displaced and not in line with the rest. In my code below, I have commented the div.right both in the css and the html, which is causing the problem. please look at the code, then remove the comments to see how my div appears. then help me align this third column to be in line with the first two. thank you. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html lang="en-US" xml:lang="en-US" xmlns="http://www.w3.org/1999/xhtml1"> <head> <title>top navigation bar</title> <style type="text/css"> div#header { position:relative; width:70%; margin-bottom:2px; border: 1px solid gray; line-height: 150%; margin-left:16.5%; margin-right:auto; } div.header { padding:0.1em; color:white; background-color: gray; clear:left; } div.footer { padding:0.1em; color:white; background-color:#333333; clear:left; } h1.header { padding:0; margin: 0; } div.left { float:left; width: 250px; margin: 0; padding: 1em; } div.content { margin-left:270px; border-left: 1px solid gray; padding: 1em; width: 190px; border-right: 1px solid gray; }/*div.right { margin-left:495px; width:auto; padding: 1em; border-left: 1px solid gray; }*/ </style></head> <body> <div id="header"> <div class="header"><h1 class="header">tickertape</h1></div> <div class="left">The logo comes here</div> <div class="content">phone numbers come here</div> <!-- <div class="right">customer care image here</div> --> <div class="footer">the menu items</div> </div> </body></html> Link to comment Share on other sites More sharing options...
thescientist Posted September 16, 2010 Share Posted September 16, 2010 as the long as the sum of the three columns widths do not exceed their container, (or just don't give the parent a width) why not just try floating all the columns? (left or right, don't think it would matter) Link to comment Share on other sites More sharing options...
ShadowMage Posted September 16, 2010 Share Posted September 16, 2010 Follow thescientist's advice and float them all (I floated them left) and then remove those huge margins as well.FWIW, you might want to consider switching to a Strict DTD too, as long as this page seems to be in its infancy. And validate your code as you work. If you follow these two guidelines you'll produce a much more cross-browser compatible website.EDIT: Oh, and try this for centering your header div:div#header{width:70%;margin-bottom:2px;border: 1px solid gray;line-height: 150%;margin: 0px auto;}Notice: I also took out the position: relative as it doesn't appear to be necessary. Feel free to keep it if you do need it. Link to comment Share on other sites More sharing options...
thescientist Posted September 16, 2010 Share Posted September 16, 2010 this thread feels like some sort of Back to the Future scene or something, haha Link to comment Share on other sites More sharing options...
computer Posted September 16, 2010 Author Share Posted September 16, 2010 the position relative is so because the div is placed below another div on my page.Am quite new to css, and I just want to know how I can validate my code. What's the procedure or where can I get the tutorials?And frankly I do not know the difference or consequences of using the Transitional or Strict DTD. I just use Transitional coz, that's what the W3schools code uses.I hope that's not too much to ask.Thanks in advance. Link to comment Share on other sites More sharing options...
thescientist Posted September 16, 2010 Share Posted September 16, 2010 the position relative is so because the div is placed below another div on my page.Am quite new to css, and I just want to know how I can validate my code. What's the procedure or where can I get the tutorials? ummm...the parent website of this forum? as for validation, there's the w3c's validator. validator.w3.org (or see my sig)And frankly I do not know the difference or consequences of using the Transitional or Strict DTD. I just use Transitional coz, that's what the W3schools code uses.I hope that's not too much to ask.Thanks in advance.a tough one to defend, but probably because this site was created waaaay back in the day. read this thread, and some of the other posts by the same OP; we've had a long running discussion about DTD's this weekhttp://w3schools.invisionzone.com/index.ph...=0&p=183309 Link to comment Share on other sites More sharing options...
thescientist Posted September 16, 2010 Share Posted September 16, 2010 also, the BTF reference was only because we have similar names. Probably could have come up with something better, in all honesty. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.