Wednesday, December 12, 2018

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…

0 Comments

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>