1 reply [Last post]
Tojo
Tojo's picture
Offline
Regular
Last seen: 5 years 27 weeks ago
Timezone: GMT+1
Joined: 2011-10-21
Posts: 44
Points: 76

I have this markup and CSS from a book called bulletproof web design with Dan Cderholm that I read.
If I run the code as it is now with this /*width:180px;*/ still comment out
I can understand it.
The image is floated to the left and #sweden dt
is floated far to the right.

If I now want the title(dt) to be on it's own line and the description below I can
assign width:180px; to the #sweden dt style so it looks like this

#sweden dt
       {
          float:right;
          width:180px;
          margin:0;
          padding:0;
          font-size:130%;
          letter-spacing:1px;
          color:#627081;   
       }

Now to my question can somebody explain three things to me why it works as it does when we use width:180px; on the #sweden dt declaration
First of all. Why does the title(dt) come on it's own line.
Secondly.Why is not the title floated to the right when we have said float:right.
Third. How can this width:180px; do so much

<!DOCTYPE html>
<html>
<head>
   <style type="text/css">
       body
       {
          font-family:Arial, sans-serif;
          font-size:small;
       }
 
       #sweden
       {
           width:300px;
           padding:10px 0;
           border:2px solid #C8CDD2;
       }
 
       #sweden dl
       {
           margin:10px 20px;
           padding:0;
       }
 
       #sweden dt
       {
          float:right;
          /*width:180px;*/
          margin:0;
          padding:0;
          font-size:130%;
          letter-spacing:1px;
          color:#627081;   
       }
 
       #sweden dd
       {
         margin:0;
         padding:0;
         font-size:85%;  
         line-height:1.5em;
         color:#666;
       }
 
       #sweden dd.img img
       {
           float:left;
       }
 
   </style>
	<meta charset="utf-8" />
	<title>Chapter 3</title>
</head>
<body>
	<div id="sweden">
       <dl>
          <dt>Stockholm</dt>
          <dd class="img"><img src="img/gamlastan.jpg" width="80" height="80" alt="Gamla Stan" /></dd>    
          <dd>This was taken in Gamla Stan (old Town) in a large square of amazing buildings.</dd>
       </dl>
 
       <dl>
          <dt>Gamla Uppsala</dt>
          <dd class="img"><img src="img/uppsala.jpg" width="80" height="80" alt="Gamla Uppsala" /></dd>
          <dd>The first three Swedish kings are buried here, under ancient burial mounds.</dd>
       </dl>
 
       <dl>
          <dt>Perpetual Sun</dt>
          <dd class="img"><img src="img/watch.jpg" width="80" height="80" alt="Wristwatch" /></dd>
          <dd>During the summer months, the sun takes forever to go down. this is a good thing.</dd>
       </dl>
    </div>
</body>
</html>

//tony

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 3 days 6 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

Hi Tojo, DT and DD are both

Hi Tojo,
DT and DD are both block level elements so they will take up all available horizontal space, unless floating or some other change causing other behaviour.

To make these examples show up clearer add #sweden dt{background:red;}.

Try commenting out the float on #sweden dt to see what I mean.
If you add #sweden dl {overflow:hidden} as well it will give more like what you would expect.

Now add back in the float on #sweden dt. Notice the dt is only as wide as it's text and it is to the right.
Then add in the width and you will see that it is acting more like a block element again but is sitting beside the image. The 180px and the width of the image plus padding etc make it hard for the next element to sit on beside it.

Backgrounds and borders are quite useful for having a look at how things work, you should also get familiar with the browsers "Inspect Element" feature to see the values of properties and where they are coming from.

Hope that helps.