CODEWITHSUNDEEP
htmlcss
theguitarman
theguitarman

Reputation: 43

CSS DIV Alignment with dynamic content

My question is about CSS and DIV tags. I have a dynamic page, and I would like one container DIV. There are two scenarios: in one case, this container DIV will just have one DIV in it, with a width of 50%, and should be centered. In the other case, there will be two DIVs in it, and they should be side by side, each taking up 50%.

I have tried float:center (using overflow: hidden on the container DIV), and that works for 1 DIV in it, but with two, they are stacked on top of each other. If I use float: left, then the 2 DIVS appear correct, but the single DIV is left aligned, not centered.

Any help on how to achieve this effectively would be greatly appreciated!

<div style="width:800; margin: 2px; background-color:blue">
    <div style="width:50%;  background-color:orange;">
        Text
    </div>
    <div style="width:50%; background-color:red;">
        Text
    </div>
</div>

jsFiddle

Upvotes: 1

Views: 104

Answers (3)

misterManSam
misterManSam

Reputation: 24702

Similar to chharvey's answer, this can be achieved nicely with display: table;

In my example it is centered horizontally and will work with any number of columns as they will fit themselves to the full width of div.wrap. The columns are currently given a height of 100%, this can be adjusted.

Have a jsBin example!

HTML

<div class="wrap">
    <div class="column">
    </div>
    <div class="column">
    </div>
</div>

CSS

html,body {
    height: 100%;
}

.wrap { 
    display: table;
    width: 800px; 
    height: 100%;
    margin: 0 auto;
}

.column {
    display: table-cell;
    background: #FF0;
}
.column:first-child {
    background: #F00;
}

Upvotes: 0

Lal
Lal

Reputation: 14810

check this fiddle

HTML

<div class="wrapper">
    <div class="divholder"> 
        <div style="background-color:orange;">DIV 1</div>
        <div style="background-color:red;">DIV 2</div> 
    </div>
</div>

CSS

.divholder div{
    display:inline-block;
    margin:auto;
    width:49%;

}
.divholder {
    text-align:center;
    margin: 0 auto;
    position:relative;
}
.wrapper{
    width:100%;
    background-color:blue;
}

This perfectly deals with your need..While there is only one div, the div gets centered and if two divs come then both will be equally divided and floated left.Please see the fiddle..

Upvotes: 1

chharvey
chharvey

Reputation: 9376

For the two-div scenario:

<div style="width:800; margin: 2px; background-color:blue; display: table;">
    <div style="background-color:orange; display: table-cell;">
        Text
    </div>
    <div style="background-color:red; display: table-cell;">
        Text
    </div>
</div>

Now for the one-div scenario:

<div style="width:800; margin: 2px; background-color:blue; display: table;">
    <div style="background-color:orange; display: table-cell;">
        Text
    </div>
</div>

In each case, the inner divs, whether there are 1 or 2, will take up a combined 100% of the outer div. Essentially, it acts like the <table> element without having the semantics of a <table>.

Upvotes: 1

Related Questions