www.webdeveloper.com
Results 1 to 3 of 3

Thread: float and clear

  1. #1
    Join Date
    Jun 2008
    Posts
    136

    float and clear

    The code simply puts the column on left side and content on right side:

    Code:
    <div>
    	<div style="float: left; width: 20%;">
    		content<br /><br /><br />
    		content<br /><br /><br />
    		content<br /><br /><br />
    		content<br /><br /><br />
    		content<br /><br /><br />
    		content<br /><br /><br />
    	</div>
    	<div style="margin-left: 20%;">
    		<div>
    			content<br /><br /><img src="/images/cake.jpg" style="float: left;" /><br />
    			content<br style="clear: both;" />content
    			content<br /><br /><br />
    		</div>
    	</div>
    </div>
    I want to only clear the image I've been floating. (only the floats that appear in the main content area) But it is clearing the left column float too.
    Where I'm going wrong on this?

  2. #2
    Join Date
    Dec 2011
    Location
    Centurion, South Africa
    Posts
    776
    Use overflow:

    Code:
    <div>
    	<div style="float: left; width: 20&#37;;">
    		content<br /><br /><br />
    		content<br /><br /><br />
    		content<br /><br /><br />
    		content<br /><br /><br />
    		content<br /><br /><br />
    		content<br /><br /><br />
    	</div>
    	<div style="margin-left: 20%; overflow: hidden;">
    		<div>
    			content<br /><br /><img src="/images/cake.jpg" style="float: left;" /><br />
    			content<br style="clear: both;" />content
    			content<br /><br /><br />
    		</div>
    	</div>
    </div>
    JavaScript: Learn | Validate | Compact

  3. #3
    Join Date
    Jun 2008
    Posts
    136
    Thanks for the replay.

    It works but I ran into another problem. I need div#content minimum height equal to div#menu's height. div#menu's height is not fixed and can be different due to different pages.
    I tried giving html,body and divs height 100%, so that it stretch itself out, but now when div#content has a long data, it gets hidden at the end because of "overflow hidden". Any idea?

    Code:
    <html style="height: 100%;">
    <body style="height: 100%;">
    <div style="height: 100%;">
    	<div id="menu" style="float: left; width: 20%;">
    		content<br /><br /><br />
    		content<br /><br /><br />
    		content<br /><br /><br />
    		content<br /><br /><br />
    		content<br /><br /><br />
    		content<br /><br /><br />
    	</div>
    	<div id="content" style="margin-left: 20%; overflow: hidden; background-color: yellow; height: 100%;">
    		<div>
    			content<br /><br /><img src="2.jpg" style="float: left;" width="200" /><br />
    			content<br style="clear: both;" />content
    			content<br /><br /><br />
    		</div>
    	</div>
    </div>
    </body>
    </html>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles