Forum Moderators: not2easy
I have a three column layout, main nav on the left, content in the middle, image with caption on the right. Main nav and the image container are both placed using floats. So far so good.
I have a sub navigation on certain pages. This sub nav is supposed to appear in a box that below the heading, and the content is supposed to wrap around it. No problem, just put the markup below my h1 and h2 headings and above the rest of my content, right?
Here's my dilemma.
Because of the way the CMS I'm using outputs markup, I cannot put the markup for the sub nav where it would be easy to style. Nope, as far as I have been able to figure out, I can either put it above the markup for the right hand column content or below all of the rest of the page content. This is making it very difficult for me to place the block where I want it.
Any suggestions?
Here is a parred down version of my page:
example.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>test</title>
<link href="example.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div class="main">
<div class="menu">
<ul>
<li><a href="http://example.com">Link1</a> </li>
<li><a href="http://example.com">Link2</a> </li>
<li><a href="http://example.com">Link3</a> </li>
<li><a href="http://example.com">Link4</a> </li>
</ul>
</div>
<div class="content">
<div class="submenu">
<ul>
<li><a href="http://example.com" target="_top">Test page</a></li>
<li><a href="http://example.com" target="_top">Test page</a></li>
<li><a href="http://example.com" target="_top">Test page</a></li>
</ul>
</div>
<div class="sidebar">
<div class="image">This will be an image.</div>
<p>This is a test caption.</p>
</div>
<h1>Header Example</h1>
<h2>Subheader example</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent sem turpis, lacinia a, molestie at, semper a, justo. Cras ligula. Ut vitae felis. Nullam iaculis cursus sem. Curabitur interdum. Phasellus laoreet nibh in orci. Quisque consequat lectus eu dui. Proin turpis risus, porta at, pretium id, sodales id, metus. Cras venenatis. Suspendisse sagittis ornare sapien. Fusce id tellus ut nulla hendrerit bibendum.</p>
<p>Nunc varius lectus pulvinar purus. Nulla porta lectus at urna. Etiam tempor orci quis purus. Maecenas congue est sed risus. Vivamus sed nunc. Vestibulum gravida nisi id augue blandit facilisis. Morbi tempor, sapien vitae dapibus aliquet, turpis ligula mollis neque, quis gravida turpis quam a libero. Morbi libero enim, consectetuer varius, fermentum quis, pulvinar nec, ipsum. Morbi id risus. Cras eget nulla ut tortor feugiat ultrices. Sed sit amet orci. Ut molestie diam quis libero. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque eu elit. Suspendisse sapien metus, lacinia sit amet, semper a, condimentum et, augue. Vivamus hendrerit vehicula purus. Morbi blandit lacus in diam convallis pharetra.</p>
<p>Etiam pretium volutpat arcu. Nullam eget mauris. Proin accumsan, mauris eget dictum consequat, augue ligula pharetra ligula, sit amet condimentum nulla sapien at lectus. Duis non metus vel arcu porttitor sodales. Nulla risus purus, sollicitudin vel, porta ut, ultricies ut, dui. Mauris pulvinar tellus. Nam id libero ut nisl ullamcorper auctor. Curabitur lacinia dictum quam. Phasellus vestibulum, turpis vel rutrum rhoncus, neque augue tincidunt metus, a pellentesque turpis felis sit amet arcu. Praesent dapibus. Sed sit amet mauris sed tortor tristique fringilla. Phasellus erat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis semper, nulla sed commodo mattis, justo nulla ullamcorper ante, vel euismod nulla velit ac nulla. Ut ac magna pharetra tellus lacinia placerat.</p>
</div>
</div>
</body>
</html>
example.css
h1 {
width: 345px;
margin-bottom: 0;
}
h2 {
border-bottom: 1px solid black;
width: 345px;
}.main {
width: 820px;
margin: auto;
padding: 0;
border: 2px solid black;
}
.menu {
float: left;
width: 175px;
padding: 20px 0 10px 40px;
}
.content {
margin-left: 245px;
padding: 20px 0 14px 10px;
text-align: justify;
clear: right;
}
.content p{
width: 345px;
}
.sidebar {
width: 200px;
font-size: 10px;
text-align:right;
float: right;
margin-left: 10px;
margin-top: 50px;
}
.image {
width: 200px;
height: 300px;
border: 1px solid black;
}
.sidebar p {
padding: 10px 10px 0 20px;
margin: 0;
width: 170px;
}
.submenu {
width: 160px;
border: 5px solid red;
float: right;
margin-right: 215px;
}
.submenu {
width: 160px;
border: 5px solid red;
/*float:right;*/
float: left;
clear:left;
/*margin-right: 215px; */
}
For ie class the first <p> after the <h2> and set display via a conditional comment in the head:
<!--[if IE]>
<style type="text/css">
p.first {
display:inline;
}
</style>
<![endif]-->
