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 10 of 10
  1. #1
    New Coder
    Join Date
    May 2010
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS: Divs next to each other

    How do I get two Divs next to each other?
    If i put
    Code:
    float:left;
    on one and
    Code:
    float:right;
    on the other theres a gap between them :/
    And if i put
    Code:
    float:left;
    on one, and
    Code:
    float:none;
    on the other theres no gap but its not in the center :/
    How do I get two divs exactly next to eachother and exactly in the center?

  • #2
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Your enquiry is too general. We need to see what code you have got already.

    There is a lot of help here. Use the Search box.

    Another fine resource here.

    Frank
    Last edited by effpeetee; 05-13-2010 at 12:36 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #3
    New Coder
    Join Date
    May 2010
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Here how it looks like you can get the source code there. and it should look like this :s

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Apply float and a suitable width to the first one and then apply margin-left/right depending upon the the direction of float. Take a look at http://bonrouge.com/2c-hf-fixed.php to get an example.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #5
    New Coder
    Join Date
    May 2010
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    And when I have a 10px padding, there is a 10px gap around the div :/

  • #6
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    And when I have a 10px padding, there is a 10px gap around the div :/
    That doesn't make any sense. Please post your complete code and explain the issue.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #7
    New Coder
    Join Date
    May 2010
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Code:
    #text1 {
       width:816px;
       height:278px;
       margin-left:auto;
       margin-right:auto;
       background-image:url("images/text1.png");
       background-repeat:no-repeat;
       padding:10px;
    When I have a padding, there is a space around the div, which is as thick as the padding, in my case 10px.

  • #8
    New Coder
    Join Date
    Jun 2009
    Location
    Hamphire, UK
    Posts
    47
    Thanks
    7
    Thanked 1 Time in 1 Post
    The way I'd code this page is to have the three divs you want next to each other held in a larger div.
    The HTML I'd use is:

    Code:
    <div id="master_div">
    <div id="top_left">
    
    </div><!--end of top_left-->
    <div id="top_right>
    
    </div><!--end of top_right-->
    <div style="clear:both;"></div>
    <div id="bottom">
    
    </div><!--end of bottom-->
    </div>
    Then the CSS:

    Code:
    #top_left {
    float: left;
    width: 410px;
    height:278px;
    background:url("YOUR IMAGE NAME HERE") top no-repeat;
    }
    
    #top_right {
    float: left;
    width: 406px;
    height:278px;
    background:url("YOUR IMAGE NAME HERE") top no-repeat;
    }
    
    #bottom {
    width: 816px;
    height:278px;
    background:url("YOUR IMAGE NAME HERE") top no-repeat;
    }
    Something like that anyway.

  • #9
    New Coder
    Join Date
    Jun 2009
    Location
    Hamphire, UK
    Posts
    47
    Thanks
    7
    Thanked 1 Time in 1 Post
    Quote Originally Posted by Freduboy View Post
    When I have a padding, there is a space around the div, which is as thick as the padding, in my case 10px.
    This is because padding is on top of width. If you want 10px padding, remove 10px from your width. If you have 10px padding on both sides (left & right) remove 20px from your width.
    Remember to do the same for height.

  • #10
    New Coder
    Join Date
    May 2010
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by thresher View Post
    The way I'd code this page is to have the three divs you want next to each other held in a larger div.
    The HTML I'd use is:

    Code:
    <div id="master_div">
    <div id="top_left">
    
    </div><!--end of top_left-->
    <div id="top_right>
    
    </div><!--end of top_right-->
    <div style="clear:both;"></div>
    <div id="bottom">
    
    </div><!--end of bottom-->
    </div>
    Then the CSS:

    Code:
    #top_left {
    float: left;
    width: 410px;
    height:278px;
    background:url("YOUR IMAGE NAME HERE") top no-repeat;
    }
    
    #top_right {
    float: left;
    width: 406px;
    height:278px;
    background:url("YOUR IMAGE NAME HERE") top no-repeat;
    }
    
    #bottom {
    width: 816px;
    height:278px;
    background:url("YOUR IMAGE NAME HERE") top no-repeat;
    }
    Something like that anyway.
    Well this didnt work :/
    But ty anyway

    Quote Originally Posted by thresher View Post
    This is because padding is on top of width. If you want 10px padding, remove 10px from your width. If you have 10px padding on both sides (left & right) remove 20px from your width.
    Remember to do the same for height.
    This did work ty


  •  

    Posting Permissions

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