So I've been trying to figure out an issue with my divs here; how to translate my design into the actual layout, and I've not had much luck with research or implementation. In the attached link, where you see //PORTFOLIO and then a line extending to the edge of the content area, there's a red line. Right now I have both the //PORTFOLIO and red line divs set to a specific pixel width, but I want to be able to have both divs auto-set their width (the first to automatically set its width based on how much the //TITLE takes up, and the second to fill the remaining space in the container) since I'll have other sections of the website doing the same thing, and don't want to measure specifically for each area. Any suggestions are most welcome, thank you so much!
-
Div's (all block elements) will have their width as 100% of the available space anyway, the problem with yours is that they are floated, and to have two elements floated side-by-side, they need to have widths set and the total of those must not exceed the width of the parent element. You could set both of those columns to be 50%, but then you will have no space between them, but if you then add some padding you'll increase the width beyond 50% so that wont work either. Not an answer as such I know, one of those problems where it's hard to see how div's can replace tables.– TreborbobJul 4, 2011 at 13:26
2 Answers
See: http://jsfiddle.net/GmtMK/1/ (change the width of the browser window)
<div id="columnA">
<div id="title">//Portfolio</div>
<div id="line"></div>
</div>
#columnA {
font-family: 'ProximaNovaRegular', Geneva, sans-serif;
font-size: 19px;
text-transform: uppercase;
color: #C10000;
margin-bottom: 20px;
letter-spacing: 4pt;
}
#title {
float: left
}
#line {
overflow: hidden;
height: 9px;
border-bottom: 1px solid #c10000;
}
-
1
-
Of course! I totally should have thought to use overflow: hidden! Thank you so much for your help! That totally saved me from having do to a ton of extra work.– JustinJul 4, 2011 at 15:10
First, let me complement you on your website, it looks nice and stylish!
Secondly, I have a solution for you, using display: table
css property, however, it requires adding an <hr />
element is it won't let you have cells of uneven height:
<div id="columnA">
<div id="title">//Portfolio</div>
<div id="line"><hr /></div>
</div>
#columnA {
width: 400px;
display:table;
}
#title {
display:table-cell;
width: 175px;
}
#line {
display:table-cell;
width: auto;
}
hr {
background-color: #C10000;
height: 1px;
border: 0;
}
Please see full example: http://jsfiddle.net/GmtMK/
-
That works, but it won't work in IE7. I'm going to rob your jsFiddle to show an alternative solution. Jul 4, 2011 at 14:24
-
Thank you so much for your help! And thanks for the compliment! I haven't gotten the chance to get much critique on the actual design yet, so it really helps to hear that it looks decent. It makes my day.– JustinJul 4, 2011 at 15:11