I've got a div with two large images in it. I want the center line to be down the middle of the page, no matter how large the browser window is.

Currently my markup is:

<div id="st_container">
<a href="/1" ><img src="/images/o.jpg" width="834" height="800" style="float:left;"></a>
<a href="/2" ><img src="/images/o2.jpg" width="834" height="800" style="float:right;"></a>

With a margin: 0 auto; on #st_container.

Obviously this doesn't work, but I'm not sure what direction to look in

2 answers

            width: 1670px;              
            position: absolute;
            left: 50%;
            margin-left: -835px;
Answered almost 10 years ago by Issac Kelly
  • I edited Issac's answer because his div wasn't wide enough for the floats not to drop. The margin-left must be -0.5 x the width in this technique. You also see the likes of with:200% margin-left -100%. Also the images could be inline with a text-align centre on the container - no need to float them so long as the container is wide enough for both. You will get a horizontal scrollbar to the right only on narrower screens. Richard Grevers almost 10 years ago

This works:


in Safari and Firefox at least

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
        <title>test for doctype</title>
        <style type="text/css" media="screen">
            a img{border: 0; vertical-align: bottom;}
            a{text-decoration: none;}
            *{margin: 0; padding: 0;}
            div#st_container a.first{float: left; width: 50%; display: inline;}
            div#st_container a.first img{float: right;}
            div#st_container a.second{float: right; width: 50%; display: inline;}
            div#st_container a.second img{float: left;}
            div#st_container {width: 98%; margin: 0 auto; overflow: hidden;}

        <div id="st_container">
        <a href="/1" class="first"><img src="a.jpg" width="800" height="528" alt="1" /></a>
        <a href="/2" class="second" ><img src="b.jpg" width="800" height="528" alt="2" /></a>

as does this (using backgrounds)


Assuming I have interpreted the brief correctly.

neither of these solutions relies upon a fixed width for the container, so neither has any scroll bars.

The first is most robust as it is independent of image size, drop any two images in and it will work, and it will work with other page content with appropriate clearing applied.

The background image solution requires the link element to have height set to match mage height.

Answered almost 10 years ago by Tony Crockford
  • There is a white line between the images at times - due to rounding problems using %'s I think Tony Crockford almost 10 years ago