SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Guru
    Join Date
    Feb 2007
    Posts
    730
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Sitting Two Divs Side By Side Without Using Float-Left

    Hi,

    I have 2 DIVs both 40% wide that sit under one another. I want to sit them next to one another but I cant use Float-Left; which I normally use as this messes up the rest of the layout.

    Can anyone advise other methods I can use to sit the two DIV next to one another?

  2. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,095
    Mentioned
    28 Post(s)
    Tagged
    1 Thread(s)
    You should be able to use floats without it messing up the layout, you just need to clear the floats properly.

    HTML Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>untitled</title>
    <style type="text/css" media="screen">
    .container {
      width: 100%;
      overflow: hidden;
      background: red;
    }
    .left, .right {
      float: left;
      width: 40%;
      margin: 0 5%;
      background: blue;
    }
    </style>
    </head>
    <body>
    <div class="container">
      <div class="left">yep</div>
      <div class="right">yep</div>
    </div>
    </body>
    </html>
    display: table also works now and has good browser support.
    HTML Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>untitled</title>
    <style type="text/css" media="screen">
    .container {
      width: 100%;
      display: table;
      background: red;
      border-spacing: 10px;
    }
    .left, .right {
      display: table-cell;
      width: 50%;
      background: blue;
    }
    </style>
    </head>
    <body>
    <div class="container">
      <div class="left">yep</div>
      <div class="right">yep</div>
    </div>
    </body>
    </html>
    But I always go for floats unless there's a reason to use tables for other reasons (equal height columns for example)

  3. #3
    SitePoint Guru
    Join Date
    Feb 2007
    Posts
    730
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Thanks,

    So its the overflow: hidden; on the parent div that would make two divs inside sit next to one another?

  4. #4
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,095
    Mentioned
    28 Post(s)
    Tagged
    1 Thread(s)
    no, it's float that does that.
    overflow: hidden makes the parent wrap around and contain the floats so it doesn't collapse.

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Another option for sitting elements side by side is display: inline-block, which is handy in some situations.


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
  •