tags:

views:

65

answers:

3

In the following example how do you 1) make the text "This is the second entry..." wrap and not have that .entry div forced down and 2) how do you make the the #right div not be forced down either?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;

<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head>
    <title>CSS Test</title>
    <link href="Style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
    <div id="left">
        <div class="submissions">
            <div class="numbering">1</div>
            <div class="entry">This is the first entry.</div>
        </div>
        <div class="submissions">
        <div class="numbering">2</div>
            <div class="entry">This is the second entry. This is the second entry. This is the second entry. This is the second entry. 
            This is the second entry. This is the second entry. This is the second entry. This is the second entry. This is the second entry. This is the second entry.</div>
        </div>
        <div class="submissions">
            <div class="numbering">3</div>
            <div class="entry">This is the third entry.</div>
        </div>
    </div>
    <div id="right">Google ad
    </div>
</div>
</body>
</html>
body {
}
#wrapper
{
}
#left
{
    float: left;
    border-color: Green;
    border-style: solid;
    border-width: 1px;
}
.submissions
{
    clear: both;
    font-size: large;
    font-family: Arial;
}
.numbering
{
    width: 100px;
    float: left;
    border-color: Gray;
    border-style: solid;
    border-width: 1px;
}
.entry
{
    float: left;
    border-color: Olive;
    border-style: solid;
    border-width: 1px;
}
#right
{
    width: 250px;
    float: right;
    border-color: Blue;
    border-style: solid;
    border-width: 1px;
}
A: 

Try giving your entry div a width.

For the google ad, either both the wrapper and the add need to be floated, or they need to have display: inline-block;

Nico Burns
A: 

1) Float the .numbering and .entry div left and set a width for both. 2) Set a width for your #left div.

However, I would suggest you use <ol> instead of divs, like so:

<ol>
  <li>This is the first entry</li>
  <li>This is the second entry</li>
</ol>

This gives you automatic numbering.

pegasus4747
+1  A: 

Like pegasus4747 said, use the <ol> tag for numbering

If you want #right to take up 250px and #left to fill the rest do this

#left {
padding-right: 250px;
margin: 0;
padding: 0;
}

#right {
width: 250px;
margin-left: -250px;
margin: 0;
padding: 0;
}

The negative margin will keep the #right from going down, even if the size of the screen changes.

Virat Kadaru