Learn VBA & Macros in 1 Week!

CSS - Inline Divs Go Nuts When They Contain A List

Full Excel VBA Course - Beginner to Expert

Inline Divs Go Nuts When They Contain A List	View Content

Hello,
I am trying to display a three column menu (each column is a list). I created a single container. Within that I created three more containers(each about 33% width). Each internal <div> for the separate columns are set to inline. When I put text in each of the 4 pairs of <divs> they display side by side. Just fine. But If the DIV contains a list, despite the fact that the DIVs defined as inline, it still drops to the next line and things like the background color don't even render. All of the box styles are identical except for the background color.

Shouldn't the <DIV> (defined with the display:inline) let me place whatever I want inside it? Just out of curiosity, I changed the first column into a 1 item list and it sifted to the right,.I don't know what that was based on. It also seemed to act like a block display, everytning went to the next line, and the background color was ignored. But the color attribute did render. ????? I haven't seen anything discussing the issues with defining lists inside of inline DIVs. I'm working with Firefox because that follows the standards better than IE although I have to make it work w/ IE too. What did has me pounding my head is how a UL tag seems to wipe out most (but not all) of the settings for the DIV containing it.

I am thinking of making the columns each list items as a work around but I don't know why what I tried doesn't work.

Thanks!

Randy

This is an simple example:
Code:

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
#box1 {
width:100px;
height:100px;
background-color:#FFFF33;
display:inline;
}

#box2 {
width: 100px;
height: 100px;
background-color:#FF8833;
display:inline;
}

#box3 {
width: 100px;
height: 100px;
background-color:#88FF33;
display:inline;
}

#box4 {
width: 100px;
height: 100px;
background-color:#CCCCCC;
display:inline;
}

#container {
width: 550px;
height 150px;
background-color:#CC66FF;
}

li {
list-style:none;
}

</style>
</head>

<body>
<div id="container">
<div id="box1">Column 1</div>
<div id="box2">Column 2</div>
<div id="box3">Column 3</div>
<div id="box4">
<ul>
<li>Column 4</li>
</ul>
</div>
</body>
</html>

Full Excel VBA Course - Beginner to Expert

Migrating To Css, Inline Divs

Similar Tutorials

CSS - Inline Divs Go Nuts When They Contain A List

Inline Divs Go Nuts When They Contain A List

Similar Tutorials

Migrating To Css, Inline Divs

Divs Displayed As Inline Elements

Triggering Layout And Displaying 'divs' As Inline For Ie

Failing Badly With Alignment! :( Inline Divs

Problems Displaying Divs Inline Or As A Block

Inline Fixed Height Divs With Relatively Positioned Elements

Inline List Works In Ie But Not In Ff

Inline List Problems

Vertically Centering An Inline List In A Div

Centering Inline List Inside Div

Inline List Items Displayed Vertically

Horizontal Inline Nested List - Subs Won't Align

Unordered Inline List Of Images In Webkit (safari/chrome/etc.)

Vertical List Is Hiding Divs Containing Images

I'm Going Nuts Here - Css

Maybe I'm Nuts....

Scrolling Bar Going Nuts

Its Late, And This Is Driving Me Nuts

Layout Gap In Ff Driving Me Nuts

Css Opacity For Table Bg Driving Me Nuts