Ruddlesdin Posted March 14, 2014 Share Posted March 14, 2014 Hi all,I am having issues trying to fill the space between 2 divs in a header. I have googled this to death and the suggestions provided all don't seem to work. My div that is floated right seems to get forced down. Image of my header attached. My jsfiddle is here: http://jsfiddle.net/Ruddlesdin/V7JDB/2/ <body> <div id="header"> <div id="divLeft"></div> <div id="divMiddle"></div> <div id="divRight"></div> </div></body> #header{ float: top; height: 100px; width: auto; background: orange;}#divLeft{ float: left; width: 100px; height: 100%; background: green;}#divMiddle{ height: 100%; width: auto; background: red;}#divRight{ float:right; width: 100px; height: 100%; background: blue;} Link to comment Share on other sites More sharing options...
Ingolme Posted March 14, 2014 Share Posted March 14, 2014 Floated elements only float relative to the content that follows it, so the divRight element should be placed before divMiddle. If you want a separation between the middle div and the two on the sides then give a margin to it larger than the width of the side divs: #divMiddle { margin-left: 120px; margin-right: 120px;} Link to comment Share on other sites More sharing options...
Ruddlesdin Posted March 14, 2014 Author Share Posted March 14, 2014 SOLVED: thank you so much. I have no hair left but yes, all I did was move the html tags around and it worked exactly how I wanted it to. There's about 4 hours I will never get back but I certainly won't forget for the future. Thanks, **_Paul_** Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now