Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    apm
    apm is offline
    New to the CF scene
    Join Date
    May 2010
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts

    position issue with images inside div tags

    Hi all. I got some floating issues here were the images im trying to line up doesnt behave the way i want them to. They are supposed to float with the 6 boxes to the left and the big box to the right. but something is wrong and im kind of having a hard time to figure out why. I tried to reorder the divs but nothing seems to help.

    I hope one of you gentlemen would be so kind to help me out.

    http://apm-design.dk/info.html

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,744
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello apm,
    Floats always work better when you give them a width.

    First, I gave your floats a class so they could all be styled with one entry in the CSS..
    Like this -
    Code:
    <div id="infoContent">
    				<div id="quickinfo">
    				<a href="quickinfo.html"><img src="images/info/quickinfo.png" alt="billeder" style="border-style: none;"></a>
    				</div>
    				<div id="history" class="small-box">
    				<a href="history.html"><img src="images/info/history.png" alt="history" style="border-style: none;"></a>
    				</div>
    				<div id="pic" class="small-box">
    				<a href="pictures.html"><img src="images/info/pic.png" alt="billeder" style="border-style: none;"></a>
    				
    				</div>
    				<div id="foredrag" class="small-box">
    				<a href="foredrag.html"><img src="images/info/foredrag.png" alt="billeder" style="border-style: none;"></a>
    				</div>
    				<div id="ans" class="small-box">
    				<a href="ans.html"><img src="images/info/ans.png" alt="billeder" style="border-style: none;"></a>
    				
    				</div>
    				<div id="omvis" class="small-box">
    				<a href="omvisning.html"><img src="images/info/omvis.png" alt="billeder" style="border-style: none;"></a>
    				</div>
    				<div id="medlem" class="small-box">
    				<a href="medlem.html"><img src="images/info/medlem.png" alt="billeder" style="border-style: none;"></a>
    				</div>
    				
    				
    			</div>
    Then I gave them all a width.
    Your float drop is caused by the difference in heights. #history is 184px high, then #pic is 183px high. The next float, #foredrag, moves up that 1px and rests against #history.
    To fix that, I gave them all the same height.

    Like this -
    Code:
    /*_____________________________________info________________________________________*/
    #infoContent{
    /*float: left; no need to float full width element*/
    	width:950px;
    	padding-left:25px;
    	padding-top:15px;
    overflow: auto; /*to clear floats*/
    }
    
    #quickinfo{
    	float:right;
    }
    
    .small-box {
    height: 184px;
    width: 258px;
    float: left;
    }
    
    /* #history{
    	float:left;
    }
    #pic{
    	float:left;
    }
    #foredrag{
    	float:left;
    	
    }
    #ans{
    	float:left;
    }
    #omvis{
    	float:left;
    }
    #medlem{
    	float:left;
    }
    */
    
    
    
    /*_______________________________Galleri______________________________________________*/

    See a page about clearing floats with overflow.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    apm (06-04-2010)

  • #3
    apm
    apm is offline
    New to the CF scene
    Join Date
    May 2010
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Wow big thanks man!. That wasnt only a fix it was insightful. I greatly appreaciate it. Well explained!


  •  

    Posting Permissions

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