mwbarry Posted August 21, 2011 Share Posted August 21, 2011 I am trying to make a page with an image tiled vertically down the left and right sides of the page with the content in the middle as well as having a background color. I got the images to tile using divs that are floated left and right, but I cannot get the content to flow normally over these divs. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="en"><head> <title>test</title> <style type="text/css"> body { background-color: #606060; } #left { width:280px; height:500px; background-image: url('images/leftgradient.png'); background-repeat:repeat-y; float: left; z-index: 0; } #right { width:280px; height: 500px; background-image: url('images/rightgradient.png'); background-repeat:repeat-y; float: right; z-index: 0; } #stuff { text-align: center; z-index: 1; width: 100%; } </style></head><body> <div id="left"></div> <div id="right"></div> <div id="stuff"> <table width="1000px" align="center" border="1"> <tr> <td>kjfskfs</td> <td>skfhdskfhs</td> </tr> <tr> <td>sdkfjsdkf</td> <td>sdfkjdskfs</td> </tr> </table> </div></body></html> Link to comment Share on other sites More sharing options...
dsonesuk Posted August 21, 2011 Share Posted August 21, 2011 use margin: 0 300px; (280+20, adjust to your needs) to make the content container show its left, right edges inside the inner edges of left and right columns, I also added a outer container wrapper with min-width: 960px;) (usually for 1024 res screens) to prevent columns overlapping, and stacking over each other, when browser is resized to a small width.Note: I should avoid using tables in design, and use div instead. You should only use tables to show data, as for example from a database. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="en"><head><title>test</title><style type="text/css">body {background-color: #606060;}#wrapper {min-width:960px;}#left {width:280px;height:500px;background-image: url('images/leftgradient.png');background-repeat:repeat-y;float: left;z-index: 0;}#right {width:280px;height: 500px;background-image: url('images/rightgradient.png');background-repeat:repeat-y;float: right;z-index: 0;}#stuff {text-align: center;z-index: 1;margin: 0 300px;}</style></head><body><div id="wrapper"><div id="left"></div><div id="right"></div><div id="stuff"><table width="100%" align="center" border="1"><tr><td>kjfskfs</td><td>skfhdskfhs</td></tr><tr><td>sdkfjsdkf</td><td>sdfkjdskfs</td></tr></table></div></div></body></html> Link to comment Share on other sites More sharing options...
mwbarry Posted August 21, 2011 Author Share Posted August 21, 2011 I also added a outer container wrapper with min-width: 960px;) (usually for 1024 res screens) to prevent columns overlapping, and stacking over each other, when browser is resized to a small width.Sorry after rereading my original post I realized I wasn't very clear on what I was asking.I'm trying to get the divs so they are stacking over each other. For example if the two side divs are 280px wide, I want to be able to still have content that is 900px wide centered, even if the screen is only 1024px wide. This would mean that the content div is overlapping both of the side divs. Link to comment Share on other sites More sharing options...
dsonesuk Posted August 21, 2011 Share Posted August 21, 2011 if the left and right are just there to hold background image, you could create two wrappers (outer and inner) that wrap round the content, in which one would have the left image tile down left side only, the other tile right side only, then it would expand with content.To use your current layout and have them overlap, you would have to use position: relative and absolute to produce the desired effect. Note: z-index will not work unless positioning is used for the same specific element. body {background-color: #606060;}#wrapper {min-width:960px; position:relative;}#left {position:absolute;width:280px;height:500px;background-image: url('images/leftgradient.png');background-repeat:repeat-y;/*float: left;*/z-index: 0;top:0; left:0;}#right {position:absolute;width:280px;height: 500px;background-image: url('images/rightgradient.png');background-repeat:repeat-y;/*float: right;*/z-index: 0;top:0;right:0;}#stuff {position:relative;text-align: center;z-index: 1;/*margin: 0 300px;*/} Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.