I am pretty new to designing websites the CSS way, I did a few sites around 1999/2000 but they were all table based so I am still getting my head around the layout aspects of CSS.
One problem that I just can’t crack (I have spent 3hrs trying and finally had to concede) is with laying out 3 items horizontally. I have a ‘search’ text field with a submit button, then I need a text link aligned left and then I need a text link aligned right. Please see the attached image file.
I have tried putting each item in a div, floated, not-floated, text-align left/right etc. and the closest I cam was where I actually got all three items lined up across the page but their centre’s were not aligned so they sort of stepped down towards the bottom-right of the page.
The all of the elements are contained within a wrapper which is set to be 85% of the full page width. Sorry but there is no live version of this yet to demonstrate.
I really would appreciate some help with this before I lose what little hair I have left :)
Yep, that did the trick thanks Vincent. I can’t believe I spent so long on that, I was over complicating it by the looks of things :D
Just carrying on from that do you if there is a way to specify a fixed width for column1 but then assign 50% of what is left to column2 and column3. I tried setting col1 to 450px and then assigning width: 50% to col2 and col3 but that just makes them jump down and occupy 2 x 50% of the whole container.
I figured I would put col2 and col3 into another container and set them both to width: 50% but I don’t know what width I should set for the container. My objective is to have col1 remain the same width when the page is resized but have col2 and col3 expand and contract equally – is that possible?
I never really use % as a width or height thing anymore. I don’t know if it works well with floats. I think most people just design at a width of no more than 960px, then just center that. So, you have white space on both sides of the layout and if someone has a low resolution, your website just takes up the whole page. There are min-height/width and max-height/width properties, I don’t know if that would help any, but the css for those is:
I am currently on v3 of the website that I am working on. The first two efforts were fixed width and centred and they worked OK. I thought I would try and see how it looked and behaved using a more elastic layout. I can already see that it’s becoming a pain so I may well go back to fixed width again.
I just tried the max-width as you suggested and it went a bit wacky again so I tried setting col3 to float right and that did the trick. Now it all stays where I want it to as I stretch the page around 8-)