www.webdeveloper.com
Results 1 to 12 of 12

Thread: how to make the divs side by side

  1. #1
    Join Date
    Feb 2011
    Posts
    90

    how to make the divs side by side

    lets say I have the following code:

    Code:
    <div class="container">
    <div class="item-1">
    text
    <br/>
    text
    </div>
    <div class="item-2">
    text
    <br/>
    text
    </div>
    </div>
    now I would like the two items to be side by side.
    Item-1 on the left side and item-2 on the right side.
    I want none of them to be under the other, both in the same "height" (location not size).


    How can I do that?


    I ask here because I believe css can solve the problem, I just don't sure what exactly should I do.

  2. #2
    Join Date
    Sep 2011
    Posts
    22
    You this CSS and modify the height and width to what you desire:

    Code:
    <style type="text/css">
    .container {
    	text-align: left;
    	margin: 0px auto;
    	padding: 0px;
    	border:0;
    	width: 600px;
    }
    .item-1 {
    	float: left;
    	width: 300px;
    	background-color:Red;
    }
    .item-2 { 
    	margin: 0;
    	float: left;
    	width: 300px;
    	background-color:Blue;
    }
    </style>

  3. #3
    Join Date
    May 2010
    Posts
    213
    Also one more thing is missing

    Quote Originally Posted by mikemcg36 View Post
    Code:
    <style type="text/css">
    .container {
            overflow:hidden;
    	text-align: left;
    	margin: 0px auto;
    	padding: 0px;
    	border:0;
    	width: 600px;
    }
    .item-1 {
    	float: left;
    	width: 300px;
    	background-color:Red;
    }
    .item-2 { 
    	margin: 0;
    	float: left;
    	width: 300px;
    	background-color:Blue;
    }
    </style>
    Eventually you'll figure out why
    i love easter eggs
    (if you got any creative easter eggs, send me a PM)

  4. #4
    Join Date
    Jan 2012
    Location
    Alexandria, Virginia
    Posts
    33
    The solution to your problem is very simple:

    Code:
    <style type="text/css">
    .clear { /* Also commonly known as clearfix */
    clear: both; /* At the very least, you must have this. All extra declarations are for fine-tuning */
    height: 0;
    font-size: 0;
    overflow: hidden;
    margin: 0;
    padding: 0;
    width: 0;
    line-height: 0;
    }
    
    div.container {
    margin: 0 auto; /* This will center a fixed-width container */
    width: 500px;
    }
    div.item-1 {
    float: left;
    width: 250px;
    }
    div.item-2 {
    float: left; /* You can also set this to float: right; */
    width: 250px;
    }
    </style>

    Code:
    <div class="container">
    <div class="item-1">
    <p>text</p>
    <p>text</p>
    <div class="clear"></div>
    </div>
    <div class="item-2">
    <p>text</p>
    <p>text</p>
    <div class="clear"></div>
    </div>
    <div class="clear"></div>
    </div>
    Last edited by scriptsconnect; 01-08-2012 at 08:44 PM. Reason: Needed to make a correction in CSS. My keyboard is almost broken.
    ScriptsConnect, LLC / ScriptsLancer
    www.scriptsconnect.com / www.scriptslancer.com
    Sell your PHP Scripts, CSS, jQuery, .Net, Designs and more in our digital marketplace. Also, join ScriptsLancer, a Freelancer Job Marketplace to post and bid on projects.

  5. #5
    Join Date
    Aug 2008
    Posts
    13
    Yup the one right above this post will work, just make sure you don't forget the "clear" div. Otherwise you will find yourself perplexed about why your divs do not take up space properly!
    Free, Quick, SEO Friendly Backlinks: XEGS.com Web Directory

    Free Image Hosting

  6. #6
    Join Date
    Jun 2009
    Location
    NY
    Posts
    96
    Code:
    Use the example provided by mikemcg36 and 3Nex i.e.
    
    
    Code:
    <style type="text/css">
    .container {
            overflow:hidden;
    	text-align: left;
    	margin: 0px auto;
    	padding: 0px;
    	border:0;
    	width: 600px;
    }
    .item-1 {
    	float: left;
    	width: 300px;
    	background-color:Red;
    }
    .item-2 { 
    	margin: 0;
    	float: left;
    	width: 300px;
    	background-color:Blue;
    }
    </style>
    <div class="container"> <div class="item-1"> <p>text</p> <p>text</p> </div> <div class="item-2"> <p>text</p> <p>text</p> </div> </div>
    In most circumstances, this will prevent the use of clunky <div class="clear"></div>

    Note that even if you do decide to go with <div class="clear"></div>, you only really need one pair underneath the <div class="container">.

  7. #7
    Join Date
    Jan 2012
    Location
    Alexandria, Virginia
    Posts
    33
    It is my own personal preference to put the clear in for all containers. This way, if I make modifications later, it is already there, although it is obviously not a pain to put it in once needed.
    ScriptsConnect, LLC / ScriptsLancer
    www.scriptsconnect.com / www.scriptslancer.com
    Sell your PHP Scripts, CSS, jQuery, .Net, Designs and more in our digital marketplace. Also, join ScriptsLancer, a Freelancer Job Marketplace to post and bid on projects.

  8. #8
    Join Date
    Jan 2012
    Location
    Alexandria, Virginia
    Posts
    33
    programAngel, one more thing - one of the many benefits of using the clear is to push the height of the primary container down. Add a background color to the primary container, and do not include the clear. You will see that the primary container will act as if the height is 0, thus, not showing any background color. Then, if you add clear, you will see it push down to the button of the tallest child container.
    ScriptsConnect, LLC / ScriptsLancer
    www.scriptsconnect.com / www.scriptslancer.com
    Sell your PHP Scripts, CSS, jQuery, .Net, Designs and more in our digital marketplace. Also, join ScriptsLancer, a Freelancer Job Marketplace to post and bid on projects.

  9. #9
    Join Date
    Jun 2009
    Location
    NY
    Posts
    96
    Add a background color to the primary container, and do not include the clear. You will see that the primary container will act as if the height is 0, thus, not showing any background color.
    Code:
     .container { overflow: hidden; }
    Takes care of that issue. If you are using FireBug, you'll see that after setting the overflow: hidden; property, the container encloses all elements inside it.

  10. #10
    Join Date
    May 2010
    Posts
    213
    Quote Originally Posted by scriptsconnect View Post
    programAngel, one more thing - one of the many benefits of using the clear is to push the height of the primary container down. Add a background color to the primary container, and do not include the clear. You will see that the primary container will act as if the height is 0, thus, not showing any background color. Then, if you add clear, you will see it push down to the button of the tallest child container.
    First of all, we've already taken care of that, it's done. Now he has two ways of achieving what he wanted and he can pick his favorite, which brings me to number two: Stop trying to make him use your way just because it suits you better. And thirdly, the OP isn't even complaining so stop trying so hard to prove your point. We get it, it works, let it go.
    i love easter eggs
    (if you got any creative easter eggs, send me a PM)

  11. #11
    Join Date
    Jan 2012
    Location
    Alexandria, Virginia
    Posts
    33
    Excuse me 3Nex, but no one is trying to force him to use one way or another. More information is better for he obviously doesn't know whether to do it one way or another.

    I have to say, a lot of people are incredibly moody in this forum. Chill out. Did I hold a gun to his head and tell him that he either uses my method or else?

    If he chooses to use my way, fine. If not, fine.

    All I'm doing is explaining additional elements from my method, as well as discussing based on what other members have said.
    ScriptsConnect, LLC / ScriptsLancer
    www.scriptsconnect.com / www.scriptslancer.com
    Sell your PHP Scripts, CSS, jQuery, .Net, Designs and more in our digital marketplace. Also, join ScriptsLancer, a Freelancer Job Marketplace to post and bid on projects.

  12. #12
    Join Date
    Jan 2012
    Posts
    15
    you should just notice floating in your css file: item1.{float:left;} item2.{float:right;}
    source: http://web-design-lessons.com/articles/article/1/36

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

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
  •  
HTML5 Development Center



Recent Articles