Jump to content

floating div and height: auto;


carinemaz
 Share

Recommended Posts

Hi all,I have a main div that contains 2 floating divs. The height is set to auto, and by concequence, my main div does not take into account the 2 others, and does not have any height...I need my main div to have an automatique height, so that I don't have to create a height rule for all of my pages...You have to view in firefox to see the problem.Here is a sample code to better explain the problem.any suggestions?

<!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=iso-8859-1" /><title>test</title><style type="text/css">body {background-color: #FFF;margin: 0;}p {color: #E5EEF4;}#body, #sidebar, #main {background-color: #00314C;padding: 10px;}#body, #sidebar {border: 2px solid #E5EEF4;}#body {width: 800px;margin: auto;}#sidebar {width: 200px;display: block;float: right;}#main {width: 500px;float: left;}</style></head><body><div id="body">	<div id="main">	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent laoreet aliquam erat. In hac habitasse platea dictumst. Nam tellus sapien, tincidunt vel, ullamcorper ut, placerat id, leo. Etiam lectus. Sed auctor justo. Duis ac sapien a pede aliquet bibendum. Sed vulputate, libero ac mollis tincidunt, urna lorem sagittis purus, ut volutpat velit felis nec leo. In arcu nisl, scelerisque non, commodo ut, cursus lacinia, sem. Sed scelerisque sapien eu ipsum. Duis ornare congue ligula. Proin et lectus non dui euismod commodo. Morbi aliquam, eros vitae placerat molestie, tellus enim vestibulum est, a hendrerit lectus orci dapibus augue. Nam quis orci. Sed et urna a sem commodo accumsan. Sed elit nisl, rutrum nec, malesuada quis, convallis non, lacus. </p>	</div>	<div id="sidebar">	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent laoreet aliquam erat. In hac habitasse platea dictumst. Nam tellus sapien, tincidunt vel, ullamcorper ut, placerat id, leo. Etiam lectus. Sed auctor justo. Duis ac sapien a pede aliquet bibendum. Sed vulputate, libero ac mollis tincidunt, urna lorem sagittis purus, ut volutpat velit felis nec leo. In arcu nisl, scelerisque non, commodo ut, cursus lacinia, sem. Sed scelerisque sapien eu ipsum. Duis ornare congue ligula. Proin et lectus non dui euismod commodo. Morbi aliquam, eros vitae placerat molestie, tellus enim vestibulum est, a hendrerit lectus orci dapibus augue. Nam quis orci. Sed et urna a sem commodo accumsan. Sed elit nisl, rutrum nec, malesuada quis, convallis non, lacus. </p>	</div>	</div></body></html>

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...