AV1611 Posted January 8, 2008 Share Posted January 8, 2008 I've always made my overall sites the old way: Make a table for the template, then css it to look good. It works great, but it may not always, Sooo.... I have to make sites using div's for layout. One thing alludes me when using divs: How do I line 3 of them side by side. Here is what I mean main div div1 div2 div3 close main container what happens is this: main div div1 div2 div3 close main container I have figured out that i can do 2 side by side with float left, float right, but what If I need 3 or more side by side? how do I do it then? A good example would be a liquid header. Here is a site that does it with a table. I want to convert this site to div's only: http://windows.blmservices.com/newsite. Thanks. Link to comment https://forums.phpfreaks.com/topic/85041-solved-divs-side-by-side/ Share on other sites More sharing options...
AndyB Posted January 8, 2008 Share Posted January 8, 2008 http://css.maxdesign.com.au/floatutorial/ should help clear all that up for you Link to comment https://forums.phpfreaks.com/topic/85041-solved-divs-side-by-side/#findComment-433677 Share on other sites More sharing options...
AV1611 Posted January 8, 2008 Author Share Posted January 8, 2008 I read through the last section that deal with liquid 3 column layout, which is what I'm doing kinda. Here is a sample of my problem: <div style="width: 800px; margin-left: auto; margin-right: 0px; background-color: yellow; text-align: center;";> <div style="float: left;">left float</div> <p>This text should be in the middle of the main div.</p> <div style="float: right;">right float</div> </div> You can view the problem here: http://windows.blmservices.com/site3 The right is under the container, not in the container. (and the whole container is right not centered...) Link to comment https://forums.phpfreaks.com/topic/85041-solved-divs-side-by-side/#findComment-433724 Share on other sites More sharing options...
AV1611 Posted January 8, 2008 Author Share Posted January 8, 2008 OIC, I changed it to this: <div style="width: 800px; margin-left: auto; margin-right: 0px; background-color: yellow; text-align: center;";> <div style="float: left;">left float</div> <div style="float: right;">right float</div> <p>This text should be in the middle of the main div.</p> </div> Now nothing is "broken out". I still don't understand why the container isn't centered, Do I need a clear: right or something? I don't understand that, but know it fixed a site once. Link to comment https://forums.phpfreaks.com/topic/85041-solved-divs-side-by-side/#findComment-433726 Share on other sites More sharing options...
AV1611 Posted January 8, 2008 Author Share Posted January 8, 2008 Light bulb just came on. Thanks. I'll bookmark that site. Later, Andy. Link to comment https://forums.phpfreaks.com/topic/85041-solved-divs-side-by-side/#findComment-433727 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.