Centering a div between a div floating left and a div floating right – Responsively

Here is what I ended up using for the CSS

<style>
#contain {
width: 100%;
padding: 0;
margin: 0;
display: table;
}
#left,
#right {
text-decoration: none;
display: table-cell;
width: 310px;
text-align: center;
background: #FF9000;
color: #FFFFFF;
padding: 2% 0;
}
#filler {
display: table-cell;
width: auto;
background: #F00;
text-align: center;
}

@media (max-width: 800px) {

#contain {
display:block;
width: 100%;
}

#left,
#right {

display: block;
width: 100%;
}

#filler {
display: block;
width: 100%;
}

}

</style>

Here is the HTML.

<div id=”contain”>
<div id=”left”>1</div>
<div id=”filler”>m</div>
<div id=”right”>2</div>
</div>

I used the following link to get this result.

http://stackoverflow.com/questions/21782502/how-to-make-a-divs-width-stretch-between-two-divs

I hope this helps someone else out there…

This entry was posted in browser, CSS, Joomla. Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *