I have been a developer for some time, but this is my first attempt at using CSS for page layout rather than tables. What I am trying to do is get the content in the right column to go all the way to the top of the screen, floating to the right of the title text, while leaving the rest of the layout alone. Here is my page: http://www.foldingchairdepot.com:8080/p/Cosco-Steel-Folding-Chair---Set-of-4---Black-Color__cos-1471005X.aspx This means I want my green action box to float to the right of the image (not below it). I have tried many different solutions, but I can't seem to find one that works. Just to be clear, this is what my layout would look like if I were using a positioning table, but I would like to do this with css/divs instead: <table id="tblLayoutTest"> <tr> <td colspan="2"> <!-- Title goes here --> This is the title </td> <td rowspan="2"> <!-- Concern column goes here --> This is the concern panel </td> </tr> <tr> <td rowspan="2"> <!-- big picture goes here --> This is the product image </td> <td> <!-- Price column goes here --> this is the price column </td> </tr> <tr> <td colspan="2"> <!-- Action panel goes here --> this is the action panel </td> </tr> </table> Thanks in advance
Then you need 2 columns. Put the title text in the left column. Try the 2 column layout generator. Forget about header, and footer.
Did you fix this already, looks fine from the link? Anyway to get two columns you just float the DIV's as you already explained in your post. <div id="left"> Everything inside left-col goes here </div> <div id="right"> Everything inside right-col goes here </div> <div id="bottom"> This appears underneath spanning both left and right cols </div> Code (markup): Then the CSS for this would be: #left{ float:left; width:500px; } #right{ float:left; width:300px; } #bottom{ clear:both; } Code (markup): If it's in an overall container, make sure the widths don't exceed the total width of the container otherwise the columns will obviously drop. The clear:both; is added to the "bottom" div, to well clear the floats above it.
Sorry, perhaps the example I provided wasn't enough information. I added some style tags to the table example and added comments to demonstrate exactly what I am trying to do. Just copy and paste it into a file and look at it in a browser. I am having issues because I have 3 columns and 2 rows that overlap in 2 different places. Is it possible to do this layout using divs? If so, please provide an example. Thanks for your help. <table id="tblLayoutTest"> <tr> <td colspan="2" style="border: solid 1px black; background-color:eeeeee;width:750px;"> <!-- Title goes here --> <h1 style="font-size: 1.6em; line-height: 1em; margin-bottom:.5em; font-weight: bold;">This is the title</h1> </td> <td rowspan="2" style="width:200px; height:300px; background-color:green;"> <!-- Concern column goes here --> This is the concern panel. This is the panel I would like to move up to the top just like it is shown here. </td> </tr> <tr> <td rowspan="2" style="height:350px; width:350px; background-color:red; border: solid 1px black;"> <!-- big picture goes here --> This is the product image </td> <td style="width:200px; height:250px; background-color:yellow;"> <!-- Price column goes here --> this is the price column </td> </tr> <tr> <td colspan="2" style="background-color:orange;"> <!-- Action panel goes here --> this is the action panel - this is the part I am struggling with because I am technically not basing this layout on columns - this panel must span both the price column and concern column as shown, and must be pushed down if the content in either of these columns expands downward. I want the top of this section to be able to move upward past the bottom of the image if the content contracts in size. The image size will not change.<br/><br/> I tried floating the concern panel to the right of the title, but I was unable to figure out how to make the price column move up past the bottom of the concern panel. </td> </tr> </table> HTML:
Of course but some adjustments need to be made to what you've done. Again, just to get you started, if you set 'concerncolumn' to 'position:absolute;top:0;right:0' you'll get in the ballpark of what you're looking for but other adjustments need to be made, obviously, and whether that alone works throughout, I don't know.
Hi, something like this would work as a DIV based solution in relation to the table you posted: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <style type="text/css" media="screen"> #container{ width:950px; overflow:auto; margin:0 auto; background:#333; } #title{ float:left; width:750px; height:75px; background:#ccc; } #concern{ float:right; width:200px; height:300px; background:green; } #product{ float:left; width:400px; height:350px; background:red; } #price{ float:left; width:350px; height:225px; background:yellow; } #action{ float:left; width:550px; height:125px; background:orange; } </style> </head> <body> <div id="container"> <div id="title"> Title <!-- #title --></div> <div id="concern"> Concern <!-- #concern --></div> <div id="product"> Product <!-- #product --></div> <div id="price"> Price <!-- #price --></div> <div id="action"> Action <!-- #action --></div> <!-- #container --></div> </body> </html> Code (markup): Tested in all the browsers and it works fine. Basically just make sure the widths don't exceed the total width set on the container. You might also want to remove some of the heights set if they have a dynamic height, or even change them to a min-height depending on what's going in them. The heights were just set so you could see how it'd look with content in. Oh and also you should add clear:both; to whatever appears after all of this so it clears the floats above it.
Thanks for taking the time to do this. Initially, I thought you solved it. This is definitely really close. However, I want the action panel to float down the right side of the screen. I tried switching the float on the action panel from left to right. I removed the height attributes from the price and concern panels and put some text inside. It works when the content in the price panel pushes it down, however when the content in the concern panel is longer than that in the price panel, the action panel moves over to the left instead of moving straight down with the content. FYI, I am planning to put 2 more columns across the whole width of the screen below this whole structure (in which I will definitely use clear:both), so it would not be acceptable to fake this effect by making the product image panel longer. Below is your example the way I modified it (comments inside). Do you have any suggestions on how I can achieve this? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <style type="text/css" media="screen"> #container{ width:950px; overflow:auto; margin:0 auto; background:#333; } #title{ float:left; width:750px; height:75px; background:#ccc; } #concern{ float:right; width:200px; background:green; } #product{ float:left; width:400px; height:350px; background:red; } #price{ float:left; width:350px; background:yellow; } #action{ float:right; width:550px; height:125px; background:orange; } </style> </head> <body> <div id="container"> <div id="title"> Title <!-- #title --></div> <div id="concern"> Concern This is a test sentence. This is a test sentence. This is a test sentence. This is a test sentence. This is a test sentence. This is a test sentence. This is a test sentence. This is a test sentence. This is a test sentence. This is a test sentence. This is a test sentence. This is a test sentence. This is a test sentence. This is a test sentence. This is a test sentence. This is a test sentence. This is a test sentence. This is a test sentence. This is a test sentence. This is a test sentence. This is a test sentence. This is a test sentence. This is a test sentence. This is a test sentence. This is a test sentence. This is a test sentence. This is a test sentence. This is a test sentence. This is a test sentence. This is a test sentence. This is a test sentence. This is a test sentence. This is a test sentence. This is a test sentence. This is a test sentence. This is a test sentence. This is a test sentence. This is a test sentence. This is a test sentence. This is a test sentence. This is a test sentence. This is a test sentence. This is a test sentence. This is a test sentence. This is a test sentence. This is a test sentence. This is a test sentence. This is a test sentence. This is a test sentence. This is a test sentence. This is a test sentence. This is a test sentence. This is a test sentence. This is a test sentence. This is a test sentence. This is a test sentence. This is a test sentence. <!-- #concern --></div> <div id="product"> Product <!-- #product --></div> <div id="price"> Price This is a test sentence. This is a test sentence. This is a test sentence. This is a test sentence. This is a test sentence. This is a test sentence. This is a test sentence. This is a test sentence. This is a test sentence. This is a test sentence. This is a test sentence. This is a test sentence. This is a test sentence. This is a test sentence. This is a test sentence. This is a test sentence. This is a test sentence. This is a test sentence. This is a test sentence. <!-- #price --></div> <div id="action"> Action<br/> <br/> I want this panel to "stick" to the right edge of the screen when the content in the price panel or the content in the concern panel is longer than the size of the image. >>>><br/> <br/> This panel should be pushed below the concern panel in this case. <!-- #action --></div> <!-- #container --></div> </body> </html> HTML:
Hi, Something like this: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <style type="text/css" media="screen"> #container{ width:950px; overflow:auto; margin:0 auto; background:#333; } #title{ float:left; width:750px; height:75px; background:#ccc; } #concern{ float:right; width:200px; background:green; } #product{ float:left; width:400px; height:350px; background:red; } #price{ float:left; width:350px; background:yellow; } #action{ clear:right; float:right; width:550px; height:125px; background:orange; } </style> </head> <body> <div id="container"> <div id="title"> Title <!-- #title --></div> <div id="concern"> Concern <!-- #concern --></div> <div id="product"> Product <!-- #product --></div> <div id="price"> <p>Price:Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec tempor velit sed urna euismod sed dictum elit laoreet. Vivamus sollicitudin elit ac neque aliquet id posuere arcu convallis. Aenean facilisis ligula ac quam fermentum pulvinar laoreet turpis pulvinar. Etiam placerat magna vehicula diam condimentum a suscipit magna ultricies. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam in feugiat mi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis mollis tortor sed augue tempus pharetra. Nulla dictum interdum elementum. Donec vel mi sed leo ornare vehicula bibendum in orci. Morbi ut semper erat. Donec nisl lectus, vulputate vel consequat vitae, vehicula vel tortor. Proin at lorem mauris, in consectetur urna. Donec in elit interdum nisl congue luctus. Etiam dolor nunc, condimentum ut suscipit vel, mollis non massa. Donec eu justo massa. Donec nec tempus enim. Curabitur tortor turpis, vehicula a aliquet a, porta ultricies tortor.</p> <!-- #price --></div> <div id="action"> Action <!-- #action --></div> <!-- #container --></div> </body> </html> Code (markup): So the action panel is always sticking to the right of the screen? You were on the right path of adding float:right to the action panel, you just needed to add clear:right also to the action panel also to remove the right float present on the concern panel.