I have a liquid layout page that has a max and min width of the body set (1260px and 960px, respectively). I have a left-hand sidebar that takes up the left 25% and the content which takes up the right 75% of the screen. Within the content I have placed two div containers with fixed width pictures in them (300px x 225px) with some text below each.
What I would like to do is to have those div boxes remain their own static width (300px as determined by the width of the picture above the text) but to be able to remain, for argument's sake, 50px apart inline and always in the center (bar the 50px apart) despite what browser I have them in (either the 1260 or 960px, or somewhere inbetween). The reason that I would like this is that if I use margin to separate them they only look 'centered' (again, bar the 50px in between them) in one browser width and aren't liquid in their layout.
JSFiddle: http://jsfiddle.net/fpN5t/1/
Please let me know if I'm not explaining myself very well!
Thank you so much in advance.
<div id="content">
<div id="upper-left-box">
<img class="boxed-content-image" src="images/Leaf 300x225px.jpg" alt="" />
<p>Example text example text example text example text example text example text example text example text example text</p>
</div>
<div id="upper-right-box">
<img class="boxed-content-image" src="images/Lens 300x225px.jpg" alt="" />
<p>Example text example text example text example text example text example text example text example text example text</p>
</div>
<h1 class="first-content-heading">Heading 1</h1>
<p>Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here.</p>
<p> </p>
<h2>Heading 2</h2>
<p>Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here.</p>
<p> </p>
<h3>Heading 3</h3>
<p>Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here.</p>
<p> </p>
</div>
#content { width: 75%; float: left; margin: 0; background: #FFF; } #upper-left-box { width: 300px; margin: 0 auto; position: relative; text-align: center; float: left; } .boxed-content-image { width: 300px; height: 225px; } #upper-right-box { width:300px; margin: 0 auto; position: relative; text-align: center; float: left; } .first-content-heading { clear: both; }
You can center the upper boxes by putting a container around them with margin auto. Then you can place a 50px margin in between the boxes for the effect you are looking for"
<div class="upper-boxes">
<div id="upper-left-box">
<img class="boxed-content-image" src="images/Leaf 300x225px.jpg" alt="" />
<p>Example text example text example text example text example text example text example text example text example text</p>
</div>
<div id="upper-right-box">
<img class="boxed-content-image" src="images/Lens 300x225px.jpg" alt="" />
<p>Example text example text example text example text example text example text example text example text example text</p>
</div>
</div>
.upper-boxes{ width: 650px; margin: 0 auto; }
#upper-left-box {
width: 300px;
margin:0 50px 0 0;
position: relative;
text-align: center;
float: left;
}
.boxed-content-image {
width: 300px;
height: 225px;
}
#upper-right-box {
width:300px;
position: relative;
text-align: center;
float: left;
}
Hopefully I understood the problem correctly, if not please indicate.