Few issues with 3 section li

HTML & CSS
1

Hello, I am currently having a little CSS issue with a small project I’m working on.

I’m not making anything fancy, I’m just trying to get all the positioning and basics ready so I don’t think what I’m asking isn’t very complicated.

I’m trying to formulate a ordered list, which contains 3 sections within the <li></li> one section which have the options for that particular list, one main content section, and another type of options on the other side.

The problem is that the idea class, width does not extend at the desired width nor does the background color. I want it to be a certain width, even with little information.
The other problem is that the .toolsright isn’t inline. it is under .idea but i want it beside it.

Here is my code (this is a simplified version of course and the css is another file… but its easier to display it like this)


<css> 
body {
	width: 1024px;	
}

li {
	list-style: none;
	margin-bottom: 5px;
	width: 1024px;
}

.toolsleft {
	display: inline;
	margin-right: 10px;	
}
.
.toolsright {
	display: inline;
}
.idea {
	display:inline;
	background-color: #999;
	width: 900px;
}
</css>

<html>
<body>
<ol>
<li><div class="toolsleft">Choose Color - Edit - Save</div>
<div class="idea">Section 2.1</div>
<div class="toolsright">Add Bib</div></li>
</ol>
</body>
</html>

Any tips would be great! Thank you!

2

Hi,

Inline elements do not take dimensions and are only as big as the content they hold.

You would need to float the elements if you want to apply widths. Remember also to remove the default padding and margin from your lists or the measurements will be wrong.

It looks as though your 900px width will be too wide anyway to hold all that content in one line.

You could change the design a bit and allow the middle section to be an auto width like so.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
body {
    width: 1024px;
}
li {
    list-style: none;
    margin:0 0 5px;
    padding:0;
    width: 1024px;
    clear:both;
    overflow:hidden;
}
.toolsleft {
    float:left;
    margin-right: 10px;
}
.toolsright {
    float:right
}
.idea {
    overflow:hidden;
    background-color: #999;
}
* html .idea {
    height:1&#37;;
    overflow:visible
}
</style>
</head>
<body>
<ol>
    <li>
        <div class="toolsleft">Choose Color - Edit - Save</div>
        <div class="toolsright">Add Bib</div>
        <div class="idea">Section 2.1</div>
    </li>
</ol>
</body>
</html>

However it looks as though you have tabular data there (although its hard to tell from the small snippet shown) and the best element for tabular data is a table anyway.