SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Evangelist
    Join Date
    Mar 2005
    Posts
    421
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    floating boxes forces content down

    Hello

    I have a page in two visual sections - the left side has 3 small boxes of the same width down the side, then the remaining 2/3rds of the page displays the content.

    The problem is, when i display images that are floated in the content box, they only begin to display on the same line underneath the lower of the 3 boxes on the left- so there is a large white space between the top of the content box and the display of the images.

    I know it is something to do with the css for the 3 boxes on the left, as when i remove them, the images displayed in the main content box appear at the top of the box, as they should be.

    Heres the page:
    Code:
    <body>
            <div id="container">
    			<div class ="leftbox"><?php //snip ?></div>
    			<div class ="leftbox"><?php //snip ?></div>
    			<div class ="leftbox"><?php //snip ?></div>
    			<div id = "content">
    				<h1>Header</h1>
                                    <h2>SubHeader</h2>
    				<h3>Instructions</h3>
    				<?php 
                                         // snip - load dynamic content
    				?>					
    			</div>
            </div>
        </body>
    ...and the relative css:
    Code:
    #container{
    	width: 96&#37;;
    	margin: 10px auto;
    }
    
    .leftbox{
    	float: left;
    	clear: left;
    	width: 240px;
    	margin: 0 1em 1em 0;
    	padding: 0.5em;
    	border: 1px dotted silver;
    	background-color: #F8F8F8;
    }
    
    #content{
    	margin-left: 280px;
    	padding: 1em;
    	border: 1px solid silver;
    }
    The dynamic images are rendered as follows:
    Code:
    <div class = "imgFrame">
    			<div class  = "imgThumb">
    					<img src = "<?php //snip />
    				</a>
    			</div>
    			<div class = "deleteForm">
    				<form action = "image/delete" method = "post">
    					<input name="imageID" value="<?php echo $image->getID(); ?>" type="hidden" />
    					<input type="submit" value = "delete"  />
    				</form>
    			</div>
    		</div>
    ...and the css for styling the images:
    Code:
    .imgFrame{
    	padding: 0.3em;
    	margin: 0.5em;
    	border: 1px solid silver;
    	height: 165px;
    	width: 125px;
    	background-color: white;
    	text-align: center;
    	float: left;
    }
    
    .imgThumb{
    	height: 125px;	
    }
    How can i make the images appear at the top of the content box? It seems the presence of the 3 boxes on the left are forcing it down - but this only happens to the images, and not text or other block level elements.


  2. #2
    SitePoint Wizard bronze trophy Tailslide's Avatar
    Join Date
    Feb 2006
    Location
    Bedford, UK
    Posts
    1,687
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There's probably some clever way of doing this but I'd try sticking a div around the 3 left hand ones - float that left (instead of floating the 3 divs within it) and then float the content div right.
    Little Blue Plane Web Design
    Blood, Sweat & Rust - A Land Rover restoration project


Bookmarks

Posting Permissions

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