September 2, 201114 yr Hi I am trying to create my css. But for some reason it aint stacking up correctly. my css is #wrap { width: 970px; margin: 0 auto; border: 1.5px solid #000000; background: #eee; } #header { width: 970px; height: 150px; background: #3333ff; border-bottom: 1.5px solid #000000; } #content { width: 970px; background: #33ff99; } #box1 { width: 400px; height: 300px; padding-left: 100px; border: 1px solid #000000; float: left; margin-top: 50px; } #box2 { width: 210px; height: 300px; padding-right: 60px; border: 1px solid #000000; float: left; display:block; margin-top: 50px; } #footer { width: 970px; margin-top: 60px; } basic html is <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <link rel="stylesheet" type="text/css" href="css/style.css" /> </head> <body> <div id="wrap"> <div id="header"><p>header</p></div> <div id="content"> <div id="box1"><p>media1</p></div> <div id="box2"><p>media2</p></div> </div> <div id="footer"><p>footer</p></div> </div> </body> </html> i am trying to get it like the img
September 2, 201114 yr http://www.webdesignerforum.co.uk/topic/53539-css-clearfix/page__pid__341019#entry341019
September 2, 201114 yr #box2 { width: 210px; height: 300px; padding-right: 60px; border: 1px solid #000000; float: right; display:block; margin-top: 50px; }
September 6, 201114 yr Hi David, You should use float:left and float:right to position the two boxes in the middle. Thanking You, Futureistic Team.
September 6, 201114 yr Here's an idea.. Set the #content to: #content { width: 970px; background: #33ff99; overflow: auto; /* This maintains the containing div's height */ } Then set #box2 to: #box2 { width: 210px; height: 300px; padding-right: 60px; border: 1px solid #000000; float: right; /* Changed from 'float: left;' */ display:block; margin-top: 50px; } That will come out looking like this (screenshot of page generated from your code): You can then fine-tune it further with margin and padding to get the white-space working better around your content. Edited September 6, 201114 yr by ZaLiTH
Create an account or sign in to comment