This is probably a really simple fix but I can’t seem to find it so I’m turning to you for help. This page: http://www.prvlocksmiths.com.au/company/choosing-prv-locksmiths-for-sydney-commercial-projects when resized down has an alignment problem and it’s caused by the text being too long on some of the links. This results in the layout of the nicely stacked images to be.. well.. not so nicely stacked.
How can I fix this?
EDIT: Here’s the HTML & CSS
CSS:
#benimg {
overflow:hidden;
}
.listleft {
float: left;
width: 50%;
}
.listright {
float: left;
width: 50%;
}
.listcentered {
max-width: 700px;
margin-left: auto;
margin-right: auto;
}
.rowimg {
display: block;
clear: left;
}
.imglist {
width: 100%;
height: auto;
width: auto\9; /* ie8 */
}
.txtlist{
text-align: center;
font-size: 95%;
padding-bottom: 10px;
}
HTML:
<div id="benimg">
<div class="listcentered">
<div class="listleft">
<div class="rowimg">
<a href="[[~157]]">
<img class="imglist" src="img/benefits/keymarking.png" alt="Key Marking"></a>
<p class="txtlist"><a href="[[~157]]">Professional Key Marking</a>
</p>
</div>
<div class="rowimg">
<a href="[[~158]]">
<img class="imglist" src="img/benefits/cylindermarking.png" alt="Cylinder Marking"></a>
<p class="txtlist"><a href="[[~158]]">Professional Cylinder Marking</a>
</p>
</div>
<div class="rowimg">
<a href="[[~159]]">
<img class="imglist" src="img/benefits/keyterminalreseller.png" alt="Key Terminal Reseller"></a>
<p class="txtlist"><a href="[[~159]]">Sydney Locksmith reseller for Keyterminal</a>
</p>
</div>
<div class="rowimg">
<a href="[[~160]]">
<img class="imglist" src="img/benefits/autojobdispatch.png" alt="Automatic Job Dispatch"></a>
<p class="txtlist"><a href="[[~160]]">Automated Job Dispatch System</a>
</p>
</div>
</div>
<div class="listright">
<div class="rowimg">
<a href="[[~156]]"><img class="imglist" src="img/benefits/pm7masterkeyingsoftware.png" alt="ProMaster 7 Master Keying Software"></a>
<p class="txtlist"><a href="[[~156]]">PM7 Sydney Master Keying Software</a>
</p>
</div>
<div class="rowimg">
<a href="[[~161]]"><img class="imglist" src="img/benefits/staffworkshops.png" alt="15 Staff and 8 Mobile Workshops"></a>
<p class="txtlist"><a href="[[~161]]">Automatic key machines in all Sydney Workshops</a>
</p>
</div>
<div class="rowimg">
<a href="[[~162]]"><img class="imglist" src="img/benefits/scecendorsed.png" alt="SCEC Endorsed Locksmiths"></a>
<p class="txtlist"><a href="[[~162]]">SCEC endorsed Sydney Locksmiths</a>
</p>
</div>
<div class="rowimg">
<a href="[[~163]]"><img class="imglist" src="img/benefits/automatickeymachines.png" alt="Automatic keying machines"></a>
<p class="txtlist"><a href="[[~163]]">15 Staff and 8 Mobile Workshops</a>
</p>
</div>
</div>
</div>
</div>
In a nutshell you have a left column and a right column. There can be no relationship between the content of the two columns. I would discard the concept of the two containing columns and work on a “row” concept instead.
See this fiddle for a quick and dirty example
The code, as per the example is Quick and Dirty
HTML
CSS
This should be enough to get you going. You’ll need to twek the
liwidth and padding as per your requirements. Firebug will be your friend here.Update
Inspired by powerbouys answer I’ve removed the need for floats in this fiddle
Update2
In response to your comment, changing the padding of the
lielement topadding-bottom:10px;will enable the columns to “overlap” (http://jsfiddle.net/FHE65/3/). Personally though I think flowing to one column makes more sense once you hit the size of your image.After incorporating your reszing image CSS this should now do exactly what you need
(http://jsfiddle.net/FHE65/5/). It will go to one column once you hit the width of the longest single word.