Jon,
If I'm in design mode and enter carriage returns right after the Div container, then I get the fill. I thought that because there were other DIV's within it, that would cause it to be filled. How do I get the fill without entering these carriage returns? Any suggestions would be much appreciated.
Thanks.
Don
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CL - Cedar Lodge</title>
<link href="css/styles_new.css" rel="stylesheet" type="text/css">
<style type="text/css">
a:link {
color: rgba(255,255,255,1);
text-decoration: none;
}
a:visited {
text-decoration: none;
color: rgba(255,255,255,1);
}
a:hover {
text-decoration: underline;
color: rgba(247,228,58,1);
}
a:active {
text-decoration: none;
color: rgba(255,255,255,1);
}
</style>
</head>
<body>
<div class="container">
<div class="header_text"><img src="images/header/logo2.png" width="226" height="65" alt=""/></div>
<div class="header_photo"><img src="images/header/ftop.ru_29096_border.png" width="500" height="333" alt=""/></div>
<div class="menu_container"><img src="images/Burger/burger-menu.svg" alt="" width="25"/>
<div class="menu_items">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">PHOTOS</a></li>
<li><a href="#">CALENDAR</a></li>
<li><a href="#">PLAN YOUR STAY</a></li>
<li><a href="#">TESTIMONIALS</a></li>
<li><a href="#">CONTACT</a></li>
<li><a href="#">PRICING</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
************************** CSS ***********************************
@charset "utf-8";
/*GLOBAL / DESKTOP VIEW*/
.header_text {
float: left;
margin-top: 140px;
}
.header_photo {
width: 500px;
float: left;
padding-left: 50px;
padding-bottom: 35px;
padding-top: 35px;
}
.container {
margin-right: auto;
margin-left: auto;
width: 1200px;
float: none;
background-color: #7F0B06;
}
.menu_container {
float: right;
width: 190px;
padding-top: 60px;
padding-right: 20px;
}
.menu_items {
}
/*TABLET VIEW*/
@media (min-width: 401px) and (max-width: 768px){
.container {
background-color: #FF3300;
}
}
/*MOBILE VIEW*/
@media (max-width: 400px){
.container {
background-color: #036711;
}
}
The easiest way to get the parent container of floated elements to stop collapsing is to add overflow:hidden to the parent container's css (as long as the parent container doesn't have a height setting).
In your case, adding the overflow:hidden to the .container class should do the trick.
AdChoices