CODEWITHSUNDEEP
htmlcssmultiple-columnsfluid-layout
Nanou Ponette
Nanou Ponette

Reputation: 1402

Columns with fluid width and height

I'm having trouble making a vertical bar with 5 columns and fluid width/height. What I want is when the page shrinks the height grows so the text in each column is still in the bar.

This is what i should look like and what I have: vertical bar

Now if my screen gets smaller the text comes outside the bar and thats not what I want. Also I can't get equal column widths. There are 5 columns which should be equal over 100% width but 20% each does not work.

HTML:

<div id="wizard-steps">
<div class="wizard-header float-left">Kaderings analyseaanvraag</div>
<div class="wizard-header float-left">Specificaties analyses : Type staal/stalen</div>
<div class="wizard-header float-left">Specificaties analyses : Te bepalen componenten</div>
<div class="wizard-header float-left">Specificaties analyses : Tijdschema en aantal stalen</div>
<div class="wizard-header float-left">Data-analyse</div>
</div>

CSS:

#wizard-steps {
border-radius: 3px;
border: 2px solid #a2c61c;
width: 100%;
height: 20px;
margin: 0 auto;
position: relative;
}

#wizard-steps div {
    border-right: 2px solid #a2c61c;
    width: 19%;
    height: 20px;
    text-align: center;
    cursor: pointer;
    float: left;
}

    #wizard-steps div:last-child {
        border: white;
    }

.active-step {
background-color: #a2c61c;
color: white;
}

Any help would be much appreciated!

UPDATED CSS: (Thx to Ruddy & panther)

#wizard-steps {
border-radius: 3px;
border: 2px solid #a2c61c;
width: 100%;
display: table;

}

#wizard-steps div {
    border-right: 2px solid #a2c61c;
    width: 19%;
    text-align: center;
    cursor: pointer;   
    display: table-cell;
}

    #wizard-steps div:last-child {
        border: white;
    }

.active-step {
background-color: #a2c61c;
color: white;
}

Which gets me this:

enter image description here

Any chance of fixing when it grows, the active-step background should grow aswell? Also I have a little column on the right because of the 19%.

Upvotes: 0

Views: 131

Answers (3)

Christian A
Christian A

Reputation: 377

I would use Bootstrap for this one. There you can just do something like this:

<div class="container-fluid">
<div class="row" id="wizard-steps">
<div class="col-md-2">Kaderings analyseaanvraag</div>
<div class="col-md-2">Specificaties analyses : Type staal/stalen</div>
<div class="col-md-2">Specificaties analyses : Te bepalen componenten</div>
<div class="col-md-2">Specificaties analyses : Tijdschema en aantal stalen</div>
<div class="col-md-2">Data-analyse</div>
</div>
</div>

Inside the container you can use .row to create new rows and .col-md-* to define a column. Changing the number will give your column another size. All columns together should not be taller than 12.

Upvotes: 0

Aaron Digulla
Aaron Digulla

Reputation: 328556

A common misconception in HTML/CSS is that "100%" means "100% of the browser window". Instead, it means "100% of the width of my parent". So you need to check what's the width of the parent of #wizard-steps. My guess is that is the <body> element which doesn't have a width - to allow it to grow to fit the content.

To fix this, you must set all parent elements to width: 100%;, including <body> and html:

body, html { width: 100%; }

Next, you set a height. If you do that, then an element can't grow vertically. Remove this.

Upvotes: 0

pavel
pavel

Reputation: 27072

You display: table/table-cell values for container and inner divs. And remove them heights and floats.

#wizard-steps {
    border-radius: 3px;
    border: 2px solid #a2c61c;
    width: 100%;
    position: relative; /* you can remove that too */
    display: table;
    /* margin: 0 auto isn't necessary when width is 100% */
}

#wizard-steps div {
    border-right: 2px solid #a2c61c;
    width: 19%;
    text-align: center;
    cursor: pointer;   
    display: table-cell;
}

#wizard-steps div:last-child {
    border: white;
}

.active-step {
    background-color: #a2c61c;
    color: white;
}

http://jsfiddle.net/ew0ku220/

Upvotes: 3

Related Questions