CODEWITHSUNDEEP
htmlcss
obinoob
obinoob

Reputation: 657

Place two divs inside a div container?

How can I put two divs side by side?

The left div has to be aligned top, left The second top, right. Both has to be "inside" the container and respect auto-growth...

Thanks.

this is what I've done:

.devCtrl,#leftcolumn,#rightcolumn {
    background: rgba(255, 255, 255, .3);
    border-color: rgba(255, 255, 255, .6);
    border-style: solid;
    border-width: 1px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

#leftcolumn {
    display:inline;
    min-height: 400px;
    float: left;
    width: 440px;
}

#rightcolumn {
    width: 440px;
    min-height: 400px;
    float: right;
}

Upvotes: 1

Views: 52562

Answers (3)

webdesserts
webdesserts

Reputation: 1023

Update: Use Flexbox

These days I would do this with flexbox. It has a decent amount of browser support and if you use fallbacks (I would suggest using autoprefixer) you should be fine.

#containerDiv {
  display: flex;
  justify-content: space-between;
}

And that's it! This will respect auto-growth and, even better, will allow the right div to wrap to the next line when the container runs out of space (you can prevent this with flex-wrap: nowrap;). If you're wanting to work more divs into a column layout, I would also suggest looking into flex-direction: column;. Flexbox can do a lot of other stuff like reorder the divs and control how to align those boxes, so I would look into it more if it interests you.

Use Absolute Positioning

#containerDiv {
  position: relative;
}
#leftDiv {
   position: absolute;
   top: 5px;
   left: 5px;
}
#rightDiv {
   position: absolute
   top: 5px;
   right: 5px;
}

The only issue with this is that the divs will ignore any other content in the #container div and you would have to set a top-margin for the first set of content below the divs. This obviously will not adjust to any increase in size from your container divs

or

Use floats

I see that you already have a few floats in your current css, but I'm guessing your having issues with the float's overflowing your containing div or content.

#leftDiv {
    float: left;
}

#rightDiv {
    float: right;
}

#nextSetOfContent {
    clear: both;
}

and both the container and all following content would pay attention to a growth in content.

If you have no other content below the two divs, you can ensure that the outermost div expands to them by adding an overflow: auto to the container div. This is generally referred to as a "clearfix". Just take note that this is kind of a hack, and can cause unexpected results in odd circumstances. I would do more reading up on it if you want to prevent anything like that.

Otherwise you would have to put an empty element below the floats and then clear: both on it.

As you can see, your choices vary depending on what exactly you need to with the rest of the container div's content. Let me know if there is any extra content in the container div and I can edit my answer to apply.

Upvotes: 9

obinoob
obinoob

Reputation: 657

/Div container/

#containerDiv {
    overflow: hidden;
    margin-top: 7px;
    margin-left: 7px;
    margin-right: 7px;
}

/Div's shared rules/

.container,#leftDiv,#rightDiv {
    background: rgba(255, 255, 255, .3);
    border-color: rgba(255, 255, 255, .6);
    border-style: solid;
    border-width: 1px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    width: 414px;
}

/*All tables */ 

.container td {     
   padding-right: 10px;     
   text-align: justify; 
}

/leftDiv specific info/

#leftDiv {
    float: left;
    padding: 10px;
}

/rightDiv specific info/

#rightDiv {
    float: right;
    padding: 10px;
}

Upvotes: 2

Visionary Software Solutions
Visionary Software Solutions

Reputation: 3848

Yuck. Don't do it like that. Try this or this. Yahoo offers a nice service to help make good layouts:

Upvotes: 1

Related Questions