Wickham
Privileged
-
Joined
-
Last visited
Solutions
-
Wickham's post in Horizontal Div Alignment was marked as the answerCopy this code without editing it and save with a new filename because it shows what I think you are trying to do:
<!DOCTYPE html> <head> <title>bo newsletter 6 slots</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> body{ background:#FFF; margin:0; padding:0; } .header{ background-attachment: scroll; background-clip: border-box; background-color: rgba(0, 0, 0, 0); background-image: url(/images/headerBg.png); background-origin: padding-box; background-size: auto; border-collapse: separate; color: rgb(26, 77, 128); display: block; float: left; font-family: Arial, Helvetica, sans-serif, Calibri; font-size: 14px; font-weight: bold; height: 130px;/*118px;*/ line-height: 18px; width: 950px; background-color: orange; } .logo{ background-color: yellow; border-collapse: separate; color: rgb(153, 153, 153); display: block; float: left; font-family: Arial, Helvetica, sans-serif, Calibri; font-size: 15px; font-weight: bold; height: 80px; line-height: 18px; margin-bottom: 0px; margin-left: 5px; margin-right: 0px; margin-top: 40px; width: 295px; } .menucon{ background-color: skyblue; border-collapse: separate; color: rgb(153, 153, 153); display: block; float: right; font-family: Arial, Helvetica, sans-serif, Calibri; font-size: 15px; font-weight: bold; height: 118px; line-height: 18px; width: 450px; } .social{ background-color: lime; /*width: 50px;*/ display: block; height: 80px; line-height: 18px; } </style> </head> <body> <div class="header"> <div class="logo"><a href="index.php">Logo</a> </div> <!--<div class="social">test</div> coded after right div--> <div class="menucon"><!--not menuCon with capital C--> <!--<div></div>--> <!--<div></div>--> <div id="menu"> <ul class="sf-menu"> <li class="home"><a href="index.php"></a></li> <li><a href="knowledgebase.php"><span></span>F.A.Q's</a></li> <li><a href="announcements.php"><span></span>News</a></li> <li><a href="clientarea.php"><span></span>Client Portal</a></li> <li><a href="contact.php"><span></span>Contact Us</a></li> </ul> </div><!--end of #menu--> </div><!--end of .menucon--> <div class="social">test<br />test in .social div<br />test in .social div</div> </div><!--end of .header--> </body> I've given the divs colors so that you can see the arrangement.
If you want two floated divs (one left and one right) with a div in the middle, code the float left and float: right divs first in the markup, then the middle div and the middle div .social with a lime color fills all the space between the left and right divs. Note that .social is without a width and in fact overlaps the float left div but the text content will start at the side of the float: left div. If you give the middle div a width, it will drop down unless you code that with float: left as well and put it after the first float; left div.
Be careful to use the same case for style and markup, you had .menucon with a lower case c in the markup and .menuCon with a capital C in the style.
You had two empty divs in .menucon which I have deleted.