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 dif开发者_JAVA百科ficulty with is the CSS for the divs. Any help?

---

Check out the float property.

Quick example:

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

Check out this beginner tutorial on CSS Floats.

---

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; 
}

---

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>

---

CSS:

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

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

---

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

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

---

add the following to your divs:

style="float:left"

---

#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.