entropy Posted August 20, 2012 Share Posted August 20, 2012 I am trying to get three div's to float horizontally. I've tried several methods: The body-part of the html: <body><div class="container"> <div class="left"> Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left </div> <div class="middle"> Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle </div> <div class="right"> Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right </div></div></body> And the five tries: Attempt one: <style type="text/css">.container {width: 40em;font-size: 1em;}.left {float: left;width: 20%;}.middle {float: left;}.right {float: left;width: 20%;}</style> Attempt two: <style type="text/css">.container {width: 40em;font-size: 1em;}.left {float: left;width: 20%;}.middle {float: left;}.right {float: right;width: 20%;}</style> Attempt three: <style type="text/css">.container {width: 40em;font-size: 1em;}.left {float: left;width: 20%;}.middle {float: left;width: 55%;}.right {float: right;width: 20%;}</style> Attempt four: <style type="text/css">.container {width: 40em;font-size: 1em;}.left {float: left;width: 20%;}.middle {float: left;width: auto;}.right {float: right;width: 20%;}</style> Attempt five: <style type="text/css">.container {width: 40em;font-size: 1em;}.left {float: left;width: 20%;}.middle {float: left;margin: 0 auto 0 0;width: auto;}.right {float: right;width: 20%;}</style> In the last attempt, one can play around with the 'auto's', but nothing seems to get the result I want. From these, attempt three is the only one that works more or less. The problem is that al widths are relative. When I want to, for instance, make the widths of the two columns on the side fixed (px), then I can't find a way to strech the middle collumn to fit. Link to comment Share on other sites More sharing options...
niche Posted August 20, 2012 Share Posted August 20, 2012 By "float horizontally", do you mean one under another or one beside another. I thought you meant one under another until I saw your code. Link to comment Share on other sites More sharing options...
entropy Posted August 20, 2012 Author Share Posted August 20, 2012 By "float horizontally", do you mean one under another or one beside another. I thought you meant one under another until I saw your code.Sorry for the misunderstanding. I mean side-by-side. Link to comment Share on other sites More sharing options...
niche Posted August 20, 2012 Share Posted August 20, 2012 (edited) That's what I thought. You can float everything right or left (just make sure there's enough room). If you want to give the center div special attention, float left, then, right, then margin: 0 auto; Edited August 20, 2012 by niche Link to comment Share on other sites More sharing options...
entropy Posted August 20, 2012 Author Share Posted August 20, 2012 That's what I thought. You can float everything right or left (just make sure there's enough room). If you want to give the center div special attention, float left, then, right, then margin: 0 auto;Can you put that in code for me? Link to comment Share on other sites More sharing options...
niche Posted August 20, 2012 Share Posted August 20, 2012 (edited) You were close enough that I was happy to help. Typically, a "put it in code" request get's a favorable response after you've demonstrated your work (preferably original work). Adjust as needed: <html><head> <style type="text/css">.container {width: 400px;} .left {float: left;width: 100px;}.middle { margin: 0 auto;width: 100px; }.right {float: right;width: 100px; } </style></head><body><div class="container"> <div class="left"> Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left </div> <div class="right"> Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right </div><div class="middle"> Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle </div> </div> </body></html> Edited August 20, 2012 by niche Link to comment Share on other sites More sharing options...
entropy Posted August 20, 2012 Author Share Posted August 20, 2012 My english falls short of perfect, but if I understand you correctly, I should preferably demonstrate my understanding of the matter prior to bluntly asking for code. Fair enough. Thanks in advance. Going to try now. Link to comment Share on other sites More sharing options...
niche Posted August 20, 2012 Share Posted August 20, 2012 That's right. You did right by posting your original work. You will find that effort always gets rewarded at w3schools. Likewise, lack of effort will probably be ridiculed rather harshly. Link to comment Share on other sites More sharing options...
entropy Posted August 20, 2012 Author Share Posted August 20, 2012 It seems that I have to choose between all-relative and all-absolute widths. Thanks for your help so far, niche. Link to comment Share on other sites More sharing options...
niche Posted August 20, 2012 Share Posted August 20, 2012 (edited) Not ture. There's always min/max height/width. See Property Dimensions: http://www.w3schools...t.asp#dimension Edited August 20, 2012 by niche Link to comment Share on other sites More sharing options...
entropy Posted August 20, 2012 Author Share Posted August 20, 2012 Not ture. There's always min/max height/width. See Property Dimensions: http://www.w3schools...t.asp#dimension Yes, I know. The problem is that I want the width of the center column variable, and the widhts of the sidecolumns fixed. I recollect that this is easy to do with tables, but I want to try to get it right with CSS. Link to comment Share on other sites More sharing options...
dsonesuk Posted August 20, 2012 Share Posted August 20, 2012 You give the left and right margins of middle the same or slightly more (10px) than the width of side panels respectively. Link to comment Share on other sites More sharing options...
entropy Posted August 21, 2012 Author Share Posted August 21, 2012 You give the left and right margins of middle the same or slightly more (10px) than the width of side panels respectively.When I do that, but the side-panels have a max-width, the middle panel does not fit anymore.I can't seem to get de middle panel 'fit' into the space between the two side-panels, whichever widths these sidepanels may have. Any genius idea always welcome... Link to comment Share on other sites More sharing options...
dsonesuk Posted August 21, 2012 Share Posted August 21, 2012 Sorry as i understood it the side panels are fixed? now you say they use max-width: which is used on fluid elements, and stop going beyond a certain width. When you make up your mind what you trully want, lets us know and we will be able to help you. Link to comment Share on other sites More sharing options...
entropy Posted August 21, 2012 Author Share Posted August 21, 2012 Sorry as i understood it the side panels are fixed? now you say they use max-width: which is used on fluid elements, and stop going beyond a certain width. When you make up your mind what you trully want, lets us know and we will be able to help you.I want do be able to vary the widhts and sort of widths of the side panels at will and float the middle panel in between! Link to comment Share on other sites More sharing options...
entropy Posted August 21, 2012 Author Share Posted August 21, 2012 Sorry, I mean *kind* of widths of course. (Can't seem to edit my posts...!) Sorry for the misunderstanding. 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