WeLoveCSS Logo
Home Profile Members Search Rules Help New Posts

WeLoveCSS > WEB DESIGN > CSS > float left/right div but with not fixed width

  Thread Tools Display Modes
Old 1st September 10, 07:09 AM   #1
WLC Member
Join Date: Sep 2010
Posts: 3
Default float left/right div but with not fixed width

I am new at CSS, but have programmed user interfaces in other languages.

I am try to do the typical left -right <div> is a header. But I do not want to have fixed width divs. I some code that "works" But WHY?

If i set the #headleft width to less than 80% I see the left and right <div> on the side on the main div, not in the header where it should be.

WHY does css not follow child parent structure? to me common sense states <div id="maindiv"> should always be after <header>. It should matter what a child does inside a parent element, the siblings always follow.

"CSS is like Latin, it does not matter the order, just to words need to be correct" and Latin killed the romans.

HTML Code:
<header class="thehead">
	<div id="headtop">
		<span id="demo">Demo</span>
	<div id="head2">
		<div id="headleft">
			<button onclick="login();">Login</button>
			<button onclick="logout(;);">Logout</button>
			<span id="welcomeuser"> </span> 
		<div id="headright">
			<span id="techinfo"> </span>
			<select onchange="chglang();">
				<option>English 英语</option>
				<option>Chinese 汉语</option>
		<span style="clear:both">&nbsp;</span>
<!-- middle section -->
<div id="maindiv">
and the css
[INDENT]header.thehead {

div#headtop {

span#mafwdemo {

div#head2 {

div#headleft {
	float: left;
	width: 80%

div#headright {
	float: right;

div#maindiv {

Last edited by chrishirst; 1st September 10 at 12:58 PM.
hatecss is offline   Reply With Quote

Thread Tools
Display Modes
Linear Mode Linear Mode

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump

All times are GMT. The time now is 06:46 AM.

Home | Advertise | Contact Us | Top
Home | Advertise | Contact Us | Top

Copyrightę 2006 WeLoveCSS.com. All Rights Reserved.
Powered by vBulletin Version 3.8.4 Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.