jaminxz Posted March 6, 2009 Share Posted March 6, 2009 Hi guys, i have a problem with my CSS, i think there's something i'm not quite understanding. I should have a header which is one long div separated into three equal sized columns (three divs), each contain text which is inside its own div. Here's my code: HTML <body> <Div class="Header"> <Div class="Left"> <div class="Logo"><img src="Images/ACE.png" alt="Logo" height="36px" width="56px"/> <div class="LeftText"> AIR CHARTER EXPRESS </div> </div> </Div> <Div class="Middle"> <div class="RightText"> Left </div> </Div> <Div class="Right"></Div> <div class="MiddleText"> Right </div> </Div> </body> and css: @charset "utf-8"; /* CSS Document */ .Header { position:relative; height:40px; width:900px; border:solid 1px black; margin-left:200px; /*background-color:#000000;*/ } .Left { position:relative; height:40px; width:299px; /*background-color:aqua;*/ border-right:solid 1px black; float:left; display:inline; } .LeftText { display:inline; Height:38px; width:200; position:relative; top:-11px; border:solid 1px black; } .Middle /* actually right div */ { position:relative; height:40px; width:299px; /*background-color:yellow;*/ float:right; } .MiddleText { display:inline; Height:38px; width:200px; position:relative; border:solid 1px black; margin-left:60px; top:10px; } .Right /* actually middle div */ { position:relative; height:40px; width:300px; /*background-color:green;*/ float:right; border-right:solid 1px black; } .RightText { display:inline; Height:38px; width:200px; position:relative; border:solid 1px black; margin-left:60px; top:10px; } .Logo { Height:36px; width:66px; padding-top:2px; display:inline; } its actually a little confusin seeing as the middle div appears on the right and the right div in the middle but i dont want to change any of the names in case it breaks so i'll live with it! everything works fine except for the middleText div is not appearing inside it parent (right div) but on the outside of the whole header div. Can somebody please tell me why this is happening?thanks. Quote Link to comment Share on other sites More sharing options...
fabrydesign Posted March 6, 2009 Share Posted March 6, 2009 Your div's float in the order they appear. Your middle div is the first to appear in the HTML code, so it is placed on the right. Your right div comes next, so it is placed on the right side, but there is already one there, so it is to the right, but left of the already right middle div. Switch the middle and right divs in your HTML code, or make the middle float:left. Either way should fix it, I think. Also, all your html tags should be lowercase (<div> not <Div>). Quote Link to comment Share on other sites More sharing options...
jaminxz Posted March 10, 2009 Author Share Posted March 10, 2009 thanks, this works perfect now Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.