html - Wrap 3 divs in 1 div - In order to share background -
im making small website, created divs have question, have 1 div "header" , next that, have 2 divs side side, wanna wrap 3 divs in 1 container.
i tried things saw, till isnt want.
body { margin: 0; width:100%; } body > div { height: 200px; padding: 50px; } .header { background-color: grey; height: 50px; color: white; } .product { margin-top:0px; height: 500px; background-color: red; color: white; float:left; width:50%; margin:0; padding:0; } .product2 { height: 500px; margin-top:0px; background-color: blue; color: white; width:50%; float:left; margin:0; padding:0; } .crew { clear:both; background-color: tomato; color: darkgrey; } .tour { background-color: black; color: darkgrey; } .pricing { background-color: gold; color: black; } .contact { background-color: black; color: white; } .menu{ margin-top: 4%; margin-right: 5%; font-size: 18px; list-style:none; float: right; } .menu li{ display:inline; float:left; } .menu li a{ color:blue; text-decoration:none; padding:6px 23px; display:block; } .menu li a:hover{ background-color:none; color:red; }
<!doctype html> <html> <head> <meta charset="utf-8"> <link href="styles.css" rel="stylesheet" type="text/css" > <title> layout </title> </head> <body> <div class="header"> <img src="logo.png"> <ul class="menu"> <li><a href="#">home </a> </li> <li><a href="#">product tour </a> </li> <li><a href="#">pricing </a> </li> <li><a href="#">try </a></li> <li><a href="#">vision</a></li> </ul> </div> <div class="product"> </div> <div class="product2"> </div> <div class="crew"> </div> <div class="tour"> </div> <div class="pricing"> </div> <div class="contact"> </div> </body> </html>
how can wrap first 3 divs 1 ? thanks, duarte andrade
please edit css shown below. design ur need. best
.menu { float: right; font-size: 18px; list-style: outside none none; margin-top: 10px; } .menu li { color: blue; display: block; text-decoration: none; } .menu li { display: inline; float: left; padding-right: 23px; }
Comments
Post a Comment