wodake Posted September 28, 2007 Share Posted September 28, 2007 Hi,I have the following problem:On my website http://www.vobs.be/vobs_nieuw I use 3 divs next to each other, where the left and right div have a light blue background. In the middle the content of the pages appears, so this div has a variable height.I'm trying to let the background-color of the left and right div run further to the bottom of the page.I've tried everything but I can't find any solution.The goal is that the blue sideDIV's always adapt their height to the height of the middle div, which has the changing content and run always run to the bottom of the page.A second little question I have is how to get the same size of an input-box & password-box in IE & FF, which you can see on the above mentioned site with the LOGIN-part on top.I don't seem to succeed in giving them the same length in both browsers.The css-file can be found under http://www.vobs.be/vobs_nieuw/css/style.cssYou can view the code of the divs by "View Source" of the index.php page.Is there anybody who can help me with those 2 things?It would be a great help!Thx Link to comment Share on other sites More sharing options...
Err Posted September 28, 2007 Share Posted September 28, 2007 If you want the easy way, then use tables if you want the middle section to expand the side sections according to the middle content. I'm not sure if you're using tables or not, but using <div> to do it just makes it harder on you. You can adjust the widths of your inputs, like so: <input type="text" style="width:120px;"><input type="password" style="width:120px;"> http://www.w3schools.com/tags/tag_table.asphttp://www.w3schools.com/css/pr_dim_width.asp Link to comment Share on other sites More sharing options...
wodake Posted October 2, 2007 Author Share Posted October 2, 2007 If you want the easy way, then use tables if you want the middle section to expand the side sections according to the middle content. I'm not sure if you're using tables or not, but using <div> to do it just makes it harder on you. You can adjust the widths of your inputs, like so:<input type="text" style="width:120px;"><input type="password" style="width:120px;"> http://www.w3schools.com/tags/tag_table.asphttp://www.w3schools.com/css/pr_dim_width.asp Thx for the reply!I use DIV's and no tables because I was told that DIVs were the good way to build up your layout.Can you tell me how to do it with DIV's or is it too complicated?Otherwise I'll have to change it to tables é. Link to comment Share on other sites More sharing options...
aalbetski Posted October 2, 2007 Share Posted October 2, 2007 this may have what you're looking for <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><style> html,body {height:100%;width:100%;margin:0;padding:0;} div {padding:25px}</style><body > <div style="float:left;background-color:lightgrey;height:100%;width:150px"> </div> <div style="float:right;background-color:lightgrey;height:100%;width:150px"> </div> <div style="background-color:lightyellow;height:100%;" > <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam pede sapien, interdum et, vulputate sed, venenatis sed, erat. Fusce at enim id tellus cursus interdum. Phasellus ornare malesuada lorem. Morbi consectetuer mollis sem. Maecenas a arcu. Cras ullamcorper massa nec augue. Vestibulum in diam. Suspendisse nec nisl eget urna consectetuer egestas. Nulla eget nunc vitae pede varius vulputate. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras pulvinar. Nam id tortor ut sem sodales pharetra. Integer malesuada ipsum sed pede. Pellentesque metus lacus, rhoncus ac, ultrices pharetra, lobortis sed, eros. Curabitur id ligula sed velit pharetra ullamcorper. Nunc vehicula malesuada nunc. Integer dapibus. Etiam eros arcu, elementum a, laoreet a, porttitor et, velit. Suspendisse dignissim blandit sem. </div></body></html> Link to comment Share on other sites More sharing options...
ste Posted October 2, 2007 Share Posted October 2, 2007 I'm trying to let the background-color of the left and right div run further to the bottom of the page.I've tried everything but I can't find any solution.The goal is that the blue sideDIV's always adapt their height to the height of the middle div, which has the changing content and run always run to the bottom of the page.first off, you shouldn't use tables for layoutwhat you want to do is create a background graphic that has the width of the left, middle and right columns (height not important). in this graphic you have the blue at both sides the width of the left and right columns and white in the center you place this in a wrapper div which the three columns are placed inside and let the background image repeatthe wrapper div will stretch the length of whichever div is longest within the wrapper, giving you the appearance of equal lenght columns this is the most common method that designers use constantly Link to comment Share on other sites More sharing options...
Err Posted October 4, 2007 Share Posted October 4, 2007 Thx for the reply!I use DIV's and no tables because I was told that DIVs were the good way to build up your layout.Can you tell me how to do it with DIV's or is it too complicated?Otherwise I'll have to change it to tables é. That's right. <div>'s are a good way to build up your layout. Like the previous posts mentioned <table> is usually for data and isn't really meant for layouts. Getting a layout to work with <div>'s is hard. If you think you can do it then go right ahead. I tried the whole <div> approach to layouts but it was a lot harder than I would like to be. It's just too complicated and trivial to me to use <div> for layouts. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.