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 2 of 2
  1. #1
    New Coder
    Join Date
    Jul 2011
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Divs go to the left below each other

    I try to make a container of 1140 px and center it. Then in this container I try to place images next to each other. The strange thing is that both images (and the container as well I think) are aligned left, and below each other.
    I did try to put it inline and fload to the left, but it appears not to be working...

    Code:
    <body class="centerAll">
    <div id="box1">
    <div id="logos"></div>
    <div id="logo"></div>
    </div>
    Code:
    .centerAll {
    	text-align: center;
    }
    #box1{
    	margin-top: 200px;
    	width: 1140px;
    	height: 275px;
    	margin-bottom: 15px;
    }
    #logos{
    	width: 555px;
    	height: 275px;
    	background-image: url('img/one.png');
    	background-repeat: no-repeat; 
    	background-position: top;
    	
    }
    #logo{
    	width: 165px;
    	height: 275px;
    	background-image: url('img/two.png');
    	background-repeat: no-repeat; 
    	background-position: top;
    	display:inline-block;
    	float:left;
    	margin-left: 20px;
    }

  • #2
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,739
    Thanks
    41
    Thanked 191 Times in 190 Posts
    I think you need to look at and understand the box model and then Block vs Inline elements and how they behave. You have two block levels there which would stack on each other, and then one being floated. What you need to do is float all three. A quick google on 3 column div layout will get you a ton of results... here's one.

    Try running through some online tutorials as well as they will teach you a great deal.

    I code C hash-tag .Net
    Reference: W3C W3CWiki .Net Lib
    Validate: html CSS
    Debug: Chrome FireFox IE


  •  

    Tags for this Thread

    Posting Permissions

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