CSS: How do I keep the text from wreaking havoc on the layout?

Question

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.

enter image description here

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>

This might help: http://stackoverflow.com/questions/486563/overflowhidden-dots-at-the-end — greener, Jan 15 '13 at 02:44

Jon P · Accepted Answer · 2013-01-15T04:29:31.573

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

<ul class="listcentered">
    <li class="rowClear"> <a href="[[~157]]">
        <img class="imglist" src="http://www.prvlocksmiths.com.au/img/benefits/keymarking.png" alt="Key Marking"></a>
        <p class="txtlist"><a href="[[~157]]">Professional Key Marking</a></p>
      </li>

      <li class="rowimg"> <a href="[[~156]]"><img class="imglist" src="http://www.prvlocksmiths.com.au/img/benefits/pm7masterkeyingsoftware.png" alt="ProMaster 7 Master Keying Software"></a>

        <p class="txtlist"><a href="[[~156]]">PM7 Sydney Master Keying Software</a></p>
      </li>

      <li class="rowClear"> <a href="[[~158]]">
        <img class="imglist" src="http://www.prvlocksmiths.com.au/img/benefits/cylindermarking.png" alt="Cylinder Marking"></a>
        <p class="txtlist"><a href="[[~158]]">Professional Cylinder Marking</a></p>
      </li>
<li class="rowimg"> <a href="[[~162]]"><img class="imglist" src="http://www.prvlocksmiths.com.au/img/benefits/scecendorsed.png" alt="SCEC Endorsed Locksmiths"></a>

        <p
        class="txtlist"><a href="[[~162]]">SCEC endorsed Sydney Locksmiths</a>

          </p>
      </li>        

      <li class="rowimg rowClear"> <a href="[[~161]]"><img class="imglist" src="http://www.prvlocksmiths.com.au/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>
      </li>
      <li  > <a href="[[~159]]">
        <img class="imglist" src="http://www.prvlocksmiths.com.au/img/benefits/keyterminalreseller.png" alt="Key Terminal Reseller"></a>
        <p class="txtlist"><a href="[[~159]]">Sydney Locksmith reseller for Keyterminal</a></p>
      </li>
      <li class="rowimg rowClear"> <a href="[[~160]]">
        <img class="imglist" src="http://www.prvlocksmiths.com.au/img/benefits/autojobdispatch.png" alt="Automatic Job Dispatch"></a>
        <p class="txtlist"><a href="[[~160]]">Automated Job Dispatch System</a></p>
      </li>





      <li class="rowimg"> <a href="[[~163]]"><img class="imglist" src="http://www.prvlocksmiths.com.au/img/benefits/automatickeymachines.png" alt="Automatic keying machines"></a>

        <p
        class="txtlist"><a href="[[~163]]">15 Staff and 8 Mobile Workshops</a>

          </p>
      </li>
    </ul>

CSS

ul {
  position:relative
}

li
{
  float:left;
  width:47%;
  font-size:1.3em;
  padding:10px;

}

.rowClear
{
  clear:both;
}

This should be enough to get you going. You'll need to twek the li width 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 li element to padding-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.

Thanks Jon, it seems like when this concept does the job however when resized (at least from the fiddle example) it puts the content all on one column. I need it to stay in it's two column structure. — Marc, Jan 15 '13 at 03:48
@Marc this is because you are approaching the width of your image. This would be the minimum width of you column regardless of approach. What do you expect to happen when the resize forces the column width to less than the width of the image? — Jon P, Jan 15 '13 at 03:58
I expect the column to reduce the image width like how it's currently set. Check out the URL in the post and you'll see what I mean. — Marc, Jan 15 '13 at 04:05

score 1 · Answer 2 · answered Jan 15 '13 at 03:01

1

Adding the following to your CSS should fix the issue:

.txtlist > a {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
}

The above will show only only line of text in your link with a trailing ellipsis in case theres more text (when you size down the browser). If you render the <a> with its title attribute filled up with the text as well, it will show up as tooltip when someone hovers over it.

i.e. <a href="..." title="This is the link text">This is the link text</a>

Even if the text shows up as "This is the li...", when hovering over it your users will be able to see the full text.

answered Jan 15 '13 at 03:01

techfoobar

65,616
14
114
135

Thanks very much Vj, that seems to do the job. I guess there is no real way to stop the ellipsis happening is there? – Marc Jan 15 '13 at 03:07
Good idea with the title tag! However this size reduction is mainly for mobile and they won't be able too see that. – Marc Jan 15 '13 at 03:09
The `title` attribute should never be a copy of the text contents of the element. A screen reader would read the text twice. – powerbuoy Jan 15 '13 at 03:10
You can take out `text-overflow: ellipsis;` to remove the ellipsis from appearing. But the text will look cut off. – techfoobar Jan 15 '13 at 03:13
Ahh, since its for the mobile, the title isn't required anyway. – techfoobar Jan 15 '13 at 03:15

score 1 · Answer 3 · answered Jan 15 '13 at 03:08

You could use text-overflow like some people suggest:

.txtlist {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

Or (if you don't want to hide any text), you could display each .rowimg as inline-block with vertical-align: top.

Here's the changed CSS:

.rowimg {
 /*  display: block;
    clear: left; */

    width: 45%; /* You might wanna play around with this as well as margin */
    display: inline-block;
    vertical-align: top;
 }

And you also have to remove your div.listleft and div.listright elements from your HTML.

score 0 · Answer 4 · answered Jan 15 '13 at 03:01

0

Try this:

.txtlist{
    text-align: center;
    font-size: 95%;
    padding-bottom: 10px;

    /* Add this css  */
    text-overflow: ellipsis;
    white-space: nowrap;

}

answered Jan 15 '13 at 03:01

Kevin Boucher

16,426
3
48
55

score -1 · Answer 5 · answered Jan 15 '13 at 03:28

-1

Just set a fixed height to the divs

height:300px; or whatever it might be

answered Jan 15 '13 at 03:28

rcorrie

921
8
26

Absolutely no need to fix the height of the `divs`. It defeats the purpose of anything remotely resembling a fluid layout – Jon P Jan 15 '13 at 03:42

CSS: How do I keep the text from wreaking havoc on the layout?

5 Answers5