Here is a link to the test page: http://www.johncliffordtaylor.com/hsgs/
Plz take a look at my code:
The HTML that holds the First Div box and the list items then the second Div box:
- Code: Select all
<!-- Begin Left-Column 00: Navigation -->
<div id="leftcolumn_00">
<ul id="nav">
<li id="nav_items_00"><a href="index.html">Home</a></li>
<li id="nav_items_00"><a href="">Service</a></li>
<li id="nav_items_00"><a href="">Gallery</a></li>
<li id="nav_items_00"><a href="">Events</a></li>
<li id="nav_items_00"><a href="">Blog</a></li>
<li id="nav_items_00"><a href="">About</a></li>
</ul>
<!-- Begin Left-Column 01: Contact -->
<div id="leftcolumn_01">
</div>
<!-- End Left-Column 00: Navigation -->
</div>
<!-- End Left-Column 01: Contact -->
And then the CSS code around these divs:
- Code: Select all
#leftcolumn_00 {
background: #4d4d4d;
float: left;
width: 183px;
height: 145px;
padding: 10px;
border: 1px solid #ccc;
margin: 0px 5px 5px 0px;
}
#leftcolumn_01 {
background: #4d4d4d;
float:left;
width: 183px;
height: 248px;
padding: 10px;
border: 1px solid #ccc;
margin: 5px 0px 0px -11px;
}
Now please note that I'm very new to building sites with divs and CSS so I'm when I was trying to find a way to place the second div box (leftcolumn_01) I kind of placed it inside the first div tag (leftcolumn_00) I'm talking about this bit of code right here:
- Code: Select all
<li id="nav_items_00"><a href="">About</a></li>
</ul>
<div id="leftcolumn_01">
</div>
</div>
I'm pretty sure that isn't the best practice, I was kind of tired at this point and struggling to find a way to place one div box right under another. and might be whats causing the problem but any suggestion on whats going on would be great. Thx you so much for the help!
John
