CSS Component Flexibility

Question

I've got a css flexibility issue that I'm trying to solve but I'm finding no real solution and I think I'm just not seeing the solution clearly because I'm to close to the issue.

I've built an HTML content component as follows:

<div class="content_cmp">
    <div class="info"></div>
    <div class="content"></div>
</div>

With this CSS:

.content_cmp { width: 100%; }
.content_cmp .info { width: 25%; }
.content_cmp .content { width: 75%; }

Everything does its job as far as the html is concerned but the css flexibility I need seems a bit more tedious to acquire.

I need to define the layout styles once but "content_cmp" needs to take up the full width real estate of any container it sits in while at the same time "info" and "content" need to acquire the same amount of width inside "content_cmp" regardless of the width "content_cmp" takes up.

I, originally, felt that percentage widths were in order but I get some disarray in the content of both "info" and "content" when I have the component placed in a short "column" as opposed to being placed into a wide "column".

Am I just simply overlooking the solution or am I going to have to make some compromises in content display to gain flexibility?

Answer 1

Just looking at your code, it seems that width's alone won't do what you're after.

if info and content need to line up side by side, you're going to have to add floats / positioning too.

try this:

.content_cmp { width:100%; overflow:hidden; }
.content_cmp .info { float:left; width:25%; overflow:hidden; }
.content_cmp .content { float:left; width:75%; overflow:hidden; }

what specific issues are you encountering if its a not a wide container?

also look at sizing in ems for widths instead of percentages as an alternate option

Answer 2

Obviously understanding how to code this yourself is important but you can save a lot of time ironing out issues using YUI Grid CSS. Have a play with the YUI Grid Builder and look at the CSS that it generates as this solves a similar problem to yours.