Hi, I'm trying to make a simple site with some boxes. I wonder how to do these things:
1. Both boxes should have the same height, no matter which one has more content.
2. The right box should fill out the remaining space (except margin) and be on the right side of the left box. I tried to make its width 100% but that put the box under the left one instead.
Is it possible?
have you tried using a table?
In your CSS you'll need to make each box the same height and use this code:
overflow: auto;
to make the text scroll within the box.
For having the boxes on the same line, you should use either a table or make them two separate divs.
I would sugguest putting both boxes in a container and giving the illusion that the one div is growing (definitely not worded right, but look at the example and you will understand what i mean)
#container {
width: 800px;
float:left;
background: red;
display: table-row;
}
#left_column {
float:left;
width: 600px;
}
#right_column {
width: 200px;
float:left;
background: #000;
display: table-cell;
}<div id="container">
<div id="left_column">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam non est eu odio posuere auctor quis vel tellus. Mauris malesuada velit a lectus malesuada rutrum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In porttitor faucibus metus, et posuere arcu consectetur quis. Nullam tincidunt, augue quis tempor viverra, magna neque rhoncus ipsum, vel vulputate neque nunc at mi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer ultricies libero lectus. Mauris pellentesque, lectus in cursus blandit, mauris nulla fringilla elit, id molestie leo metus id lectus. Ut lorem tellus, viverra ut elementum non, egestas in nibh. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec at neque eu massa ornare commodo sit amet at felis. Integer sollicitudin erat a ipsum posuere vitae auctor urna lobortis. Sed libero ipsum, consequat eget elementum quis, venenatis euismod urna. Vivamus pulvinar justo vitae sapien pharetra venenatis. Sed ac metus augue. Curabitur blandit scelerisque malesuada. Sed a leo dolor, vitae ornare elit. </p>
</div>
<div id="right_column">
<p>Sed in aliquet massa. Phasellus aliquet, leo id pulvinar convallis, tortor turpis tincidunt dui, nec pretium augue justo volutpat eros. Aliquam congue nunc magna. Aenean ac neque purus, id condimentum odio. Nullam sapien arcu, egestas nec volutpat et, commodo et risus. In at enim quis urna venenatis venenatis. Fusce sed mollis massa. Phasellus fermentum suscipit augue et pellentesque. Quisque imperdiet convallis leo, nec mattis tellus vulputate vel. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed consequat, augue eu condimentum malesuada, sem ipsum ultrices augue, in rutrum magna massa in sapien. Donec eleifend nisl sodales libero vulputate vestibulum. Vivamus in euismod diam. Phasellus egestas scelerisque lectus, vel suscipit augue tristique nec. Pellentesque at velit vel est eleifend viverra. Pellentesque quis augue nisl, ac tristique leo. Donec convallis feugiat libero et tincidunt. Phasellus ornare adipiscing justo quis suscipit. Donec semper turpis in nunc vulputate aliquet. </p>
<p>Cras ac elit est, ut scelerisque diam. Phasellus nisl odio, tempor vitae sodales eu, lacinia quis mi. Aenean accumsan, metus in hendrerit convallis, arcu neque feugiat tellus, et pharetra libero mi vitae felis. Integer ut nisi a orci venenatis ultricies quis ut sapien. Praesent semper dapibus sollicitudin. Curabitur volutpat tincidunt dictum. Vivamus in facilisis leo. Phasellus ullamcorper lacus id ipsum viverra eleifend. Fusce ac lectus diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras accumsan semper ante, eget consequat velit condimentum ac. Mauris iaculis, dui a ultricies eleifend, nunc erat adipiscing arcu, vel vehicula arcu urna ac neque. Cras metus ligula, congue id pulvinar non, consequat sit amet est. Maecenas leo magna, tempus et euismod sed, dapibus at tortor. Phasellus in metus nisi. Ut tempus sapien auctor mauris sollicitudin eu aliquam risus consequat. Maecenas sit amet elit id orci pulvinar dapibus. </p>
</div>
</div>Try to avoid pixels for measurement
fixed sizes look like crap
#container { width: 100%; float:left; background: red; display: table-row; }
#left_column { float:left; width: 75%; }
#right_column { width: 25%; float:left; background: #555; display: table-cell; }Oh, can take out display options
#container { width: 100%; float:left; background: red;}
#left_column { float:left; width: 75%; }
#right_column { width: 25%; float:left; background: #555;}I thought tables are not allowed to use as design. Otherwise i want it basically like a table.
Neither solution does what I want. For the width, if I have to write either the size in pixels or percent, the width is not relative.
As for the height, I didn't find any way to affect the height. Nothing happens when I set a height.
arent percents relative? are you trying to set width relative to content?
table's are acceptable as far as i know. macneato's idea of a 3rd div as an alternative to the table sounds reasonable too. you just need a container to allow a consistent height. i tested with a table. i had to set the height of each table cell to 100% as well as the height of each div (in ie7) but it worked
I have been discouraged to use tables for the design, although it is simpler to use them. For my university course we were not allowed to use tables as design, unless for specific tabular data.
Of course you are right, that percentages are relative. What I meant is that I want the left column to be fixed, and the right one to fill out the rest of the width. If I remember correctly, in tables you could set the width of one column and the other ones would adjust accordingly.
On my page the two columns divs were already inside a container div. I couldn't make the height change still. I don't know why. Could it relate to me using a class definition for the div instead of an id definition? I doubt it.
Thanks for your time and effort so far!
dude, i get what you saying... so this is what you have to do to get 100% height and the columns.
#container {width: 100%;float:left;background: red; height:100%; position:absolute;}
#left_column {width: 200px;background: #000; position:absolute; height:100%}
#right_column {position: relative;margin-left: 200px;} /* note margin-left, this is the width of the left column */if you just want the width do the following;
#container {width: 100%;float:left;background: red;}
#left_column {width: 200px;background: #000; position:absolute;}
#right_column {position: relative;margin-left: 200px;}i think i understand the problem now. this is what i had to do to get it to work in IE7 without tables (borrowed mostly from macneato):
<div style="border:1px solid red; height:0">
<div style="width:200px; height:100%; float:left; border: 1px solid black">
adlfkjdsalfkjasdkfjlasdfj; adjklf d;akljf jkl;as jklasdjkl jkl;asdfj asdk;fj asdkl;fj asdl;
</div>
<div style="height:100%; float:right; margin-right:300px; border: 1px solid black">
asdfjldksa jfkl;a jl;dfask jdas;lkfj das;klf jsdklf j;sdklfjwei;o erio;t asdhfoehw hfsdlh k;fhqwe;o uih; jhasdfiweu gsdafjg sdafweqi ugfadkflg asdflhjgavhlasdg fdhsg fsdaldg gadlsgfeui gflasdfkg eiugf eilaugf adlkgf eulwg adgjk dfiugieaug agfuilg awefilug afdgs afil gaeiul gfasdklfgaweuilfg aslfsdgajk.
</div>
</div>i had to set a height for the container div, even tho it's 0, just to get it to not be f'd up... i dont know if that will hold up in other browsers
still, i think this requirement calls for tables. it doesnt look like this container div guarantees the inner divs will stay side-by-side or even that they'll always be the same distance apart... screwing around with divs to create the behaviour of a table cant be the preferred practice...
<table style="border:1px solid red; height:0">
<tr>
<td>
<div style="width:200px; height:100%; border: 1px solid black">
adlfkjdsalfkjasdkfjlasdfj; adjklf d;akljf jkl;as jklasdjkl jkl;asdfj asdk;fj asdkl;fj asdl;
</div>
</td>
<td>
<div style="height:100%; margin-right:300px; border: 1px solid black">
asdfjldksa jfkl;a jl;dfask jdas;lkfj das;klf jsdklf j;sdklfjwei;o erio;t asdhfoehw hfsdlh k;fhqwe;o uih; jhasdfiweu gsdafjg sdafweqi ugfadkflg asdflhjgavhlasdg fdhsg fsdaldg gadlsgfeui gflasdfkg eiugf eilaugf adlkgf eulwg adgjk dfiugieaug agfuilg awefilug afdgs afil gaeiul gfasdklfgaweuilfg aslfsdgajk.
</div>
</td>
</tr>
</table>same code with a table. it behaves much better. if someone tells you that's wrong, consider that a kick in the nuts makes an excellent counter argument
This type of thing works pretty well for quick and dirty layout, however, the background color of the right (main) column does not extend to the same height as the left column, so some image tiled vertically might be in order for visual effect to create a border or background color-pattern.
<html>
<head>
<title>CSS Columns Play</title>
<style type="text/css">
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
p {
margin: 0;
padding: 20px;
}
#left-col {
width: 200px;
min-height: 100%;
background: pink;
}
#main-col {
position: absolute;
top: 0;
left: 200px;
min-height: 100%;
background: lightgreen;
}
</style>
</head>
<body>
<div id="left-col">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam non est eu odio posuere auctor quis vel tellus. Mauris malesuada velit a lectus malesuada rutrum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In porttitor faucibus metus, et posuere arcu consectetur quis. Nullam tincidunt, augue quis tempor viverra, magna neque rhoncus ipsum, vel vulputate neque nunc at mi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer ultricies libero lectus. Mauris pellentesque, lectus in cursus blandit, mauris nulla fringilla elit, id molestie leo metus id lectus. Ut lorem tellus, viverra ut elementum non, egestas in nibh. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec at neque eu massa ornare commodo sit amet at felis. Integer sollicitudin erat a ipsum posuere vitae auctor urna lobortis. Sed libero ipsum, consequat eget elementum quis, venenatis euismod urna. Vivamus pulvinar justo vitae sapien pharetra venenatis. Sed ac metus augue. Curabitur blandit scelerisque malesuada. Sed a leo dolor, vitae ornare elit.</p>
</div>
<div id="main-col">
<p>Sed in aliquet massa. Phasellus aliquet, leo id pulvinar convallis, tortor turpis tincidunt dui, nec pretium augue justo volutpat eros. Aliquam congue nunc magna. Aenean ac neque purus, id condimentum odio. Nullam sapien arcu, egestas nec volutpat et, commodo et risus. In at enim quis urna venenatis venenatis. Fusce sed mollis massa. Phasellus fermentum suscipit augue et pellentesque. Quisque imperdiet convallis leo, nec mattis tellus vulputate vel. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed consequat, augue eu condimentum malesuada, sem ipsum ultrices augue, in rutrum magna massa in sapien. Donec eleifend nisl sodales libero vulputate vestibulum. Vivamus in euismod diam. Phasellus egestas scelerisque lectus, vel suscipit augue tristique nec. Pellentesque at velit vel est eleifend viverra. Pellentesque quis augue nisl, ac tristique leo. Donec convallis feugiat libero et tincidunt. Phasellus ornare adipiscing justo quis suscipit. Donec semper turpis in nunc vulputate aliquet.</p>
<p>Cras ac elit est, ut scelerisque diam. Phasellus nisl odio, tempor vitae sodales eu, lacinia quis mi. Aenean accumsan, metus in hendrerit convallis, arcu neque feugiat tellus, et pharetra libero mi vitae felis. Integer ut nisi a orci venenatis ultricies quis ut sapien. Praesent semper dapibus sollicitudin. Curabitur volutpat tincidunt dictum. Vivamus in facilisis leo. Phasellus ullamcorper lacus id ipsum viverra eleifend. Fusce ac lectus diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras accumsan semper ante, eget consequat velit condimentum ac. Mauris iaculis, dui a ultricies eleifend, nunc erat adipiscing arcu, vel vehicula arcu urna ac neque. Cras metus ligula, congue id pulvinar non, consequat sit amet est. Maecenas leo magna, tempus et euismod sed, dapibus at tortor. Phasellus in metus nisi. Ut tempus sapien auctor mauris sollicitudin eu aliquam risus consequat. Maecenas sit amet elit id orci pulvinar dapibus.</p>
</div>
</body>
</html>We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.