CODEWITHSUNDEEP
css
Carlos Muñiz
Carlos Muñiz

Reputation: 1918

How can I have two <div> elements side-by-side (2 columns)

I would like to have two tags side-by-side as if being two columns.

So far I have

<div id="wrapper">
    <div id="1">text here</div>
    <div id="2">text here</div>
    <div style="clear:both"></div>
</div>

What I'm having difficulty with is the CSS for the divs. Any help?

Upvotes: 2

Views: 40846

Answers (7)

d.i.joe
d.i.joe

Reputation: 719

#1, #2 { 
  display: inline-block; 
}

Given that both #1 and #2 divs have a total width of not greater than the parent div.

If you use float, you will end up changing them to inline-block once you have to position a child div into absolute.

Upvotes: 0

why.you.and.i
why.you.and.i

Reputation: 507

May be you can try:

div#wrapper { 
  display: table; 
}

div#wrapper div { 
   display: table-cell; 
   padding: 5px; 
}

or this one:

div#wrapper div { 
  display: inline-block; 
}

Upvotes: 3

Richard JP Le Guen
Richard JP Le Guen

Reputation: 28753

You could use float:left in conjunction with overflow-x:hidden; like so:

#1 {
    float:left
}
#2 {
    overflow-x:hidden;
}

Upvotes: 1

Dan
Dan

Reputation: 3870

CSS:

#1 {
float: left;
width: 50%;
}

#2 {
float: left;
width: 50%;
}

Upvotes: 1

Jay
Jay

Reputation: 6294

add the following to your divs:

style="float:left"

Upvotes: 0

patapizza
patapizza

Reputation: 2398

As a start:

<div id="wrapper">
  <div style="float:left;" id="1">text here</div>
  <div style="float:left;" id="2">text here</div>
  <div style="clear:both"></div>
</div>

Upvotes: 2

Jason McCreary
Jason McCreary

Reputation: 72991

Check out the float property.

Quick example:

#1, #2 {
  float: left;
  width: 49%;
}

Check out this beginner tutorial on CSS Floats.

Upvotes: 6

Related Questions