zwkle Posted February 12, 2009 Share Posted February 12, 2009 Hi, I'm struggling with something in CSS. I've written a simple css and html document to illustrate my problem. The HTML is: <html> <body> <div id="box 1"> Box 1 <div id="box 2"> Box 2 </div> <div id="box 3"> Box 3 </div> </div> </body> The CSS is: #box1{width:400px;background:red} #box2{width:200px;height:300px;background:green} #box3{width:200px;height:400px;background:blue} This shows a red box 400px wide, with the green box at the top left, and the blue box directly below the green box, also on the left side. I want to be able to move the blue box so that the top of the blue box is level with the top of the green box, and the blue box is directly to the right of the green box. I know of three ways of doing this: 1. Putting float:right on the blue box and then moving it to the top of the red box using position:relative. 2. Moving the blue box to the top right using position:absolute 3. Moving the blue box to the top right using position:relative My difficulty is that I want the height of the red box to adjust so that the bottom of the red box is in line with either the bottom of the green box or the bottom of the blue box (it should be in line with the bottom of whichever box is longer). None of my methods achieve this. Using float:right means that the bottom of the red box is in line with the bottom of the green box, so the blue box sticks out. Using position:relative only leaves the height of the red box fixed, so that there is empty space at the bottom of the red box. Can anyone help me with the solution? Thanks, Andrew Quote Link to comment Share on other sites More sharing options...
rhodesa Posted February 12, 2009 Share Posted February 12, 2009 i usually use float and then a clear after them: <html> <body> <style> #box1{width:400px;background:red;} #box2{width:200px;height:300px;background:green;float:left;} #box3{width:200px;height:400px;background:blue;float:right;} .clear{clear:both;} </style> <div id="box1"> Box 1 <div id="box2"> Box 2 </div> <div id="box3"> Box 3 </div> <div class="clear"></div> </div> </body> </html> Quote Link to comment Share on other sites More sharing options...
djjamiegee Posted February 19, 2009 Share Posted February 19, 2009 hey if i understood what you have said correctly then this should work #box1{ float:left;width:400px;background:#F00;} #box2{ float:left;width:200px;height:300px;background:#0F0;} #box3{ float:right;width:200px;height:400px;background:#00F;} jamie Quote Link to comment Share on other sites More sharing options...
TheFilmGod Posted February 19, 2009 Share Posted February 19, 2009 i usually use float and then a clear after them: <html> <body> <style> #box1{width:400px;background:red;} #box2{width:200px;height:300px;background:green;float:left;} #box3{width:200px;height:400px;background:blue;float:right;} .clear{clear:both;} </style> <div id="box1"> Box 1 <div id="box2"> Box 2 </div> <div id="box3"> Box 3 </div> <div class="clear"></div> </div> </body> </html> Use the clearfix. .clearfix { overflow: auto; } <div class="clear"></div> has recently became my pet peeve. I hate to see it, because mroe likely than not, it's unnecessary. Quote Link to comment Share on other sites More sharing options...
TheFilmGod Posted February 19, 2009 Share Posted February 19, 2009 Sorry, I don't want to double post............ BUT this is completely different to my previous post. The html code that you have provided fails to provide any semantic value. When html code is analyzed without the excessive colorful distraction of css, we see it bare skin and bones. What does your html convey? Does it convey hierarchy or text importance? - no Quite frankly, your html code fails to tell me that text is text. All text should be enclosed within block level tags such as <p> or <h1>. Never enclose text with only a div. Thisi is extremely poor semantic. Moreover, your id/class names fail to convey information to YOU as a developer. Little details like that would help you in the long run. Quote Link to comment Share on other sites More sharing options...
zwkle Posted February 21, 2009 Author Share Posted February 21, 2009 I used rhodesa's suggestion and this worked fine. Thanks for your help. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.