CODEWITHSUNDEEP
cssimagealignmenthtml-lists
Spencer Carnage
Spencer Carnage

Reputation: 2066

Img + UL alignment with CSS

I'm working on updating an old site and I ran into the following simple, but deprecated code:

<img src="thumbnail_image.jpg" align="right">

<ul>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
</ul>

This code allows for the un-ordered list to run ragged against and then below the image, taking up the width of the parent container holding both elements. In trying to recreate this in CSS, the following is the closest that I could come to getting the same effect.

<div class="floatRight">
<img src="thumbnail_image.jpg">
</div>

<div class="floatLeft">
    <ul>
    <li><a href="#">link</a></li>
    <li><a href="#">link</a></li>
    <li><a href="#">link</a></li>
    <li><a href="#">link</a></li>
    <li><a href="#">link</a></li>
    <li><a href="#">link</a></li>
    <li><a href="#">link</a></li>
    <li><a href="#">link</a></li>
    </ul>
</div>

<div class="clear"></div>

This solution allows for me to float the thumbnail_image to the right of the UL tag, however if the UL list is larger than the image, the LI links do not run ragged underneath the image like they do when using the deprecated align attribute. This seems to be related to my second issue which is I have to set a width on the UL list, or else the two elements will not float next to each other. Is there any way to get around having to explicitly state the UL width?

Upvotes: 2

Views: 8982

Answers (5)

Ape-inago
Ape-inago

Reputation: 1866

The issue may be that you are flaoting the entire div to the left. if you want each li element to float on it's own, you may want to try this:

div.floatLeft li {
  float:left;
}

Upvotes: 0

Jan
Jan

Reputation: 8151

Keep your html clean. you don't need a div container for everything. Don't use elements to clear floats, it's not semantic. Use the overflow: auto; trick for that.

Float your image to the right of the container. The content of the container will flow around it. You don't have to float the content left for that.

<!DOCTYPE HTML>
<html>
  <head>
    <title>Test</title>
    <style type="text/css">
      body{
        width:200px;
        margin: 0px auto;
        overflow: auto; // use this in stead of clearing divs
      }

      img {
        float: right;
        width: 100px;
        height: 100px;
      }
    </style>    
  </head> 

  <body> 
    <img src="thumbnail_image.jpg" alt="thumb"/>

    <ul>
      <li><a href="#">link</a></li>
      <li><a href="#">link</a></li>
      <li><a href="#">link</a></li>
      <li><a href="#">link</a></li>
      <li><a href="#">link</a></li>
      <li><a href="#">link</a></li>
    </ul>
  </body>
</html>

Upvotes: 1

Lucius
Lucius

Reputation: 963

you don't need to float left the UL, just float right the image, so get rid of the floatLeft class.. You don't even necessarily need to put the image inside a div, you coul simply float right the image itself: 

<img src="scompenso.jpg" style="float: right;">
<div>
    <ul>
    <li><a href="#">link</a></li>
    <li><a href="#">link</a></li>
    <li><a href="#">link</a></li>
    <li><a href="#">link</a></li>
    <li><a href="#">link</a></li>
    <li><a href="#">link</a></li>
    <li><a href="#">link</a></li>
    <li><a href="#">link</a></li>
    </ul>
</div>

Upvotes: 2

davidbuttar
davidbuttar

Reputation: 676

If you float the li elements themselves RIGHT do you start to get what you want?

Upvotes: 0

David Thomas
David Thomas

Reputation: 253506

I'm not entirely sure what you mean when you say 'run ragged,' but this seems to work (and matches what I can visualise from your 'deprecated' code):

CSS:

.floatRight {
    float: right;
}
.floatRight img {
    width: 200px;
    height: 200px;
    margin: 0 0 1em 1em;
    background-color: #fff;
}
/* following CSS is, pretty much, just to improve the looks */
a {
    text-decoration: none;
}
li a {
    display: block;
    background-color: #ffa;
}
li:nth-child(odd) a {
    background-color: #fff;
}
li a:hover,
li:nth-child(odd) a:hover {
    color: #000;
    background-color: #eee;
    text-decoration: underline;
}

JS Fiddle demo.

Upvotes: 1

Related Questions