CODEWITHSUNDEEP
htmlcss
Marc
Marc

Reputation: 25

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

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>

Upvotes: 0

Views: 265

Answers (5)

Jon P
Jon P

Reputation: 19772

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.

Upvotes: 2

rcorrie
rcorrie

Reputation: 921

Just set a fixed height to the divs

height:300px; or whatever it might be

Upvotes: -1

powerbuoy
powerbuoy

Reputation: 12838

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.

Upvotes: 1

Kevin Boucher
Kevin Boucher

Reputation: 16675

Try this:

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

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

}

Upvotes: 0

techfoobar
techfoobar

Reputation: 66663

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.

Upvotes: 1

Related Questions