I've setup a 3 column layout for my web page using CSS. The page works well, and when I increase/decrease the width of browser window, the columns shrink accordingly, as I have a percentage assigned to each column width.
The problem is, I have controls within each column (or div). How do I make the controls grow/shrink in width whenever the browser window is made smaller or larger?
For example, in my left column I have a listbox control. When the browser window is adjusted to be more narrow the three columns shrink in width, but the listbox control stays the same size, so it encroaches on the middle column.
Basically, I'm trying to make the page grow/shrink based on the size of the browser window. The columns do, but the controls are the same size. When I try to set the width of a control using a percentage, it takes that as a percentage of the entire page, and not the <div> that contains the control.
Last edited by The_Grudge; Jul 20th, 2011 at 10:11 AM.
When I try to set the width of a control using a percentage, it takes that as a percentage of the entire page, and not the <div> that contains the control.
Not seeing this occur when I try a quick example (instead the element interprets the percentage width from its parent's proportions). Can you post your markup and styles? Also, what browser are you using?
For the markup, I was actually hoping to see the plain HTML. I never know if I'm using appropriate terms when talking .Net, but the markup that contains all those ASP server controls is not what the browser receives when it renders your page; .Net converts its proprietary tags into standard HTML tags prior to serving the document. CSS acts upon that finalized HTML, so [imo] it's best to look at that when dealing with CSS issues.
To get that final markup, you can load the page in a browser, right-click on an empty area of the page and select "View Source."
I updated my last post containing code to the current "View/Source" copy you are looking for, so pls see code above.
I have the resizing working now for the left and right columns. In the centre though, I'm having issues. If I set the width to 90% it just takes up 90% of the width of the entire page. Also, if the page is made narrower, the middle box drops beneath the listbox in the left column.
The markup you've posted is good now, but please also put the CSS back that you had posted before. Sorry if I was unclear about that in the above post.
The markup you've posted is good now, but please also put the CSS back that you had posted before. Sorry if I was unclear about that in the above post.
You weren't being unclear, I was being daft.
I'm not at work right now, but will post the CSS back tomorrow. Thanks for the help- hope you're around tomorrow.
The CSS, as requested. Keep in mind I'm relatively new to this and I used the default CSS that you get when you fire up a new ASP project. So there may be unused elements etc.
For .MiddleCol, you should add "margin: 0 40% 0 20%", which will give it a margin of 0 for the top and bottom of the div, a left margin of 20% (equal to the width of your left column) and a right margin of 40% (equal to the right column width). This should prevent the left and right columns from overlapping the middle one.
For .MiddleBox, this is having problems with growing/shrinking due to the padding values (0 25px 0 225px); the width is set as a percentage and that will grow/shrink normally, but the padding is set with exact, unchanging pixels.
The box in the right column also has an explicit pixel width set in a style attribute, so its size will remain consistent.
For all columns, you might consider setting the "min-width" property; this is something you can set in addition to width, which specifies the minimum width that an element should be. So you could set "width:20%;min-width:200px" and the width of the element would either be 20% or 200px, whichever is greater. This property doesn't work correctly in some older versions of IE (it won't mess anything up, it simply has no effect), but I think IE8 is okay.
Please point out anything else that hasn't been addressed.
As an aside, I'd suggest using either Chrome or Firefox for testing web page layouts (and Javascript). Both browsers have better adherence to standards than IE, and have superior developer tools. Chrome has a built-in tool set, and Firefox has the FireBug extension, the latter of which is my preference. Using either approach, you can inspect web page elements on the fly, making visible things like margin and padding so you can see how they're affecting the layout, as well you can edit their values dynamically and see the immediate effect.
Thanks - most of that seems to work nicely. The only problem I'm having is that the middle column listbox still jumps under the left column when the page is made smaller. Pls see CSS and Source below:
Hm, that's actually an interesting problem that I seem to have unwittingly introduced. So you have the margin on MiddleCol, but that's in percentages: 0 40% 0 20%. And the width of LeftCol is a percentage, but the introduction of min-width gives it a fixed width at a certain point. At which point, the left margin on MiddleCol is no longer sufficient: LeftCol starts to overlap MiddleCol and the listbox drops below the float (this is expected behavior given the context).
It would be handy if CSS had a "min-margin" property, but no such thing exists. I guess the most practical approach would be either to remove the min-widths on the side columns, or to give both side columns a fixed width only, and set MiddleCol's margins to fixed sizes as well.
Reply With Quote
Originally Posted by SambaNeko
