View Full Version : Can't get section to float next to item, keeps moving under

02-23-2009, 12:26 AM
Hey Coding Community,

I can't seem to get this section to float correctly on my website. I have three items:
- A vertical Navigation box.
- A content section with text
- A vertical picture about 500 px tall.

I want the navigation box on the left with the picture floating to the left and beneath it, and then I want the content to run alongside both of those with the content's top flush with the top of the navigation box.

link (http://clandmanufacturing.comoj.com/)

All I'm trying to do is get the top of the content in-line with the top of the navigation.


02-23-2009, 12:59 AM
Hello tharden3,
Have a look at this for a start

html, body {
background: #dedede url() repeat;
font : 100%/1.4 Helvetica, Arial, sans-serif;
color : #000;
* {
margin : 0;
padding : 0;
p{ margin : 0 25px 10px 25px;}
.slideshow{ float: right; text-align: right; border: solid 2px #556B2F; margin-right: 4px; margin-left: 20px;}
#all {font: 1em; width: 920px; background-color: #6E8B3D; margin: 0 auto; overflow : hidden;text-align: left; border-left: solid 8px; border-right: solid 8px; border-color: #a3a3a3;}
#all:after {content : '.';display : block;height : 0;clear : both;visibility : hidden;}
#all {display : inline-block;}
#all {display : block;}
#titlebox{ background-color: white; width: 877px; height: 185px; border: #556B2F solid 3px; float: left; margin-top: 20px; margin-left: 10px; margin-bottom: 3px; background-image: url(HeaderHybrid.png);}

#titletxt{color: black; font : 170%/1.4 arial;margin-left: 45%; margin-top: 65px; font: 130%;}

#navcontainer {
width: 180px;
float: left;
margin: 20px 0 0 40px;
display:inline; /*fixes IE6 double margin bug*/
.clearleft {
float: left;
clear: left;
margin-left: 40px;
display: inline;
background: #fffaf0 url(sectionhead1_no_background.png) no-repeat;
width: 600px;
border: #556B2F solid 3px;
margin: 310px 0 0 290px;

#sectiontxt{font: 120%/1.4 BankGothic Md BT; padding-bottom: 50px; padding-top: 15px; padding-left: 20px;}
.horizontalNavText{/*font : 100%/1.4 Arial bold*/; float: left;margin-bottom: 5px; margin-top: 5px; margin-left: 10px; margin-right: 450px; color: white; text-decoration: none;}
.links2{ font: bold 1em/1.3 arial white; color: white; text-decoration: none;}
.navlinksText{text-decoration: none; color: #f9ffff; margin-top: 0px; margin-left: 0px; }
.navlinks a{ float: left; border: none; text-decoration: none; width: 150px; height: 25px; background-color: #499aee; padding: 1px;}
.navlinks a:hover{background-color: #0066cd;}
.navlinks{float: left; margin-top: 3px; list-style: none; font: 1em/2 "arial rounded mt bold"; margin-left: 0px;}
.validate{ float: right; border: none;}
.htmldog{ float: right; border: none; margin-right: 0px;}
.all{margin-top: /*-25px*/25px; text-align:left; background-color:;}

#logo1{float: left;}
#moveup{text-align: center;}
#info{font : 100%/.6 Helvetica, Arial, sans-serif; color: black;}
#city{float: right;}
img{ border-style: none;}

* html .all {overflow-y: hidden;}
* html #titlebox,
* html .navigation,
* html .horizontalNavText,
* html .navlinks {
display: inline;

dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;

#menu dt {
cursor: pointer;
background: #fffaf0;
height: 20px;
line-height: 20px;
margin: 2px 0;
border: 3px solid #556B2F;
text-align: center;
font-weight: bold;

#menu dd {
position: absolute;
z-index: 100;
left: 8em;
margin-top: -1.4em;
width: 10em;
background: #fffaf0;
border: 3px solid #556B2F ;

#menu ul {
padding: 2px;
#menu li {
text-align: center;
font-size: 85%;
height: 18px;
line-height: 18px;
#menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;

#menu li a:hover {
text-decoration: underline;

#mentions {
font-family: verdana, arial, sans-serif;
position: absolute;
bottom : 200px;
left : 10px;
color: #000;
background-color: #ddd;
#mentions a {text-decoration: none;
color: #222;
#mentions a:hover{text-decoration: underline;

I think I highlighted the major changes in red. I did delete and consolidate a lot so you should compare this to the original pretty closely.

02-23-2009, 07:21 AM
Thanks for the help, I'll get right on changing this and fixing my other bugs too.