I'm having trouble getting both of my floated divs to fit the height of the parent div.
I've seen a few different solutions but I run into trouble because I also need the parent div to fill the screen when the amount of content is smaller.
I can get one floated div to fill the space but if the other one has more content then it looks strange.
I posted the css that I think is effected. You can find the rest in my jsfiddle.
* {
margin: 0;
padding: 0
}
html {
height: 100%;
}
body {
position: relative;
min-height: 100%;
/* to fill screen 100% even with less content */
height: 100%;
/* to allocate only 100% height */
background-color: #460000;
margin: 0;
padding: 0;
font-family: Georgia, "Times New Roman", Times, serif;
color: #fff;
font-weight: 300;
}
#container {
height: 100%;
overflow: auto;
width: 72%;
margin: 0 auto;
background-color: #460000;
border-left: #ECA845 solid 8px;
border-right: #ECA845 solid 8px;
border-bottom: #ECA845 solid 8px;
-webkit-box-shadow: 0px 0px 29px 14px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 0px 0px 29px 14px rgba(0, 0, 0, 0.75);
box-shadow: 0px 0px 29px 14px rgba(0, 0, 0, 0.75);
}
#container::-webkit-scrollbar {
display: none;
}
body::-webkit-scrollbar {
display: none;
}
#main {
font-size: .75em;
background: url(image/rightt.png) repeat-y right;
background-color: #1281A6;
min-height: calc(100% - 505px);
height: auto;
float: left;
width: 75%;
}
#sidebar {
background-color: #498A21;
min-height: calc(100% - 505px);
height: auto;
float: left;
width: 25%;
}<body>
<div id="container">
<div id="top">
</div>
<nav>
<ul>
<li class="start selected"><a href="index.html">HOME</a>
</li>
<li class=""><a href="#">MEN</a>
</li>
<li><a href="#">WOMEN</a>
</li>
<li><a href="#">PAST ADS</a>
</li>
<li><a href="#">SALES</a>
</li>
<li><a href="#">SHOWS</a>
</li>
<li><a href="#">NEWS</a>
</li>
<li class="end"><a href="#">CONTACT</a>
</li>
</ul>
</nav>
<div id="main">
<article>
<h1>Welcome</h1>
<br>
<div align="center">
</div>
<br>
<p>Proin a risus id diam feugiat pulvinar blandit a lorem. In nec nibh eros. Morbi vitae quam sit amet quam euismod posuere ullamcorper a velit. Nullam blandit nulla lectus, sit amet gravida eros rhoncus id. Duis at efficitur nisi, sit amet aliquet
leo. Nam dolor enim, malesuada non sollicitudin eget, tempus ut nisi. Cras tellus tellus, volutpat nec nibh non, aliquet malesuada eros. Aenean placerat feugiat dolor at egestas. Aenean vulputate sapien eu erat semper tincidunt. Morbi sodales
sit amet dolor vitae malesuada. Quisque vel dolor vel massa sollicitudin finibus. Nullam pharetra interdum nisi nec viverra. Aliquam in dolor efficitur, volutpat lorem ac, sodales erat. Donec id rhoncus quam.</p>
<p>Nam laoreet sodales condimentum. Aliquam velit nunc, volutpat quis erat a, imperdiet vehicula eros. Suspendisse potenti. Phasellus diam libero, hendrerit nec mauris ac, sodales scelerisque eros. Aliquam luctus neque sed turpis tristique, in feugiat
velit ultricies. Phasellus efficitur, velit eget lacinia accumsan, ipsum lacus posuere ipsum, quis elementum augue augue quis risus. Duis laoreet, turpis vel consequat tempor, tortor odio mollis orci, nec ultrices ex sem eu erat. Cras faucibus,
libero sit amet viverra ultrices, elit enim imperdiet dui, ut blandit urna leo eu turpis. Quisque feugiat imperdiet efficitur. Sed finibus tortor at bibendum eleifend. Phasellus ornare venenatis leo non tincidunt.</p>
</article>
</div>
<div id="sidebar">
<ul>
<li>
<ul class="newslist">
<li>
<h4>Upcoming Sale</h4>
<p>Join us at the sale</p>
</li>
</ul>
<ul class="newslist">
<li>
<h4>Thank You</h4>
<p>Ladies and Gentlemen</p>
</li>
</ul>
<ul class="newslist">
<li>
<h4>Latest Catalogue</h4>
<br>
<p>View the catalogue</p>
</li>
</ul>
</ul>
</div>
<div class="clear"></div>
</div>
<footer>
<p><a href="#" target="_blank">Text Here</a>
</p>
</footer>
</body>
Aucun commentaire:
Enregistrer un commentaire