CSS Component Flexibility

HTML & CSS
1

Hello all. I’m the new guy. /wave

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>

And the 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?

2

Hi Welcome to Sitepoint :slight_smile:

If you float the column it should work ok as long as you allow a 2px margin for error due to rounding errors with percentages.


<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.content_cmp {
    width: 100&#37;;
}
.info {
    width: 25%;
    background:red;
    float:left;
}
.content {
    width: 75%;
    background:blue;
    float:right;
    margin-left:-2px;
}
p {
    margin:0 0 1em;
    padding:0 10px;
}
</style>
</head>
<body>
<div class="content_cmp">
    <div class="info">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut feugiat, sapien et imperdiet ornare, lacus lacus porttitor arcu, quis vehicula dui urna vel justo. Nam a quam vitae mauris lacinia egestas eget non metus. Phasellus tristique dictum adipiscing. Maecenas auctor tellus et est suscipit congue. Cras sollicitudin accumsan mollis. Nullam massa dui, gravida ac facilisis at, tristique eget velit. Mauris consectetur rhoncus mi ullamcorper tristique. Sed vitae aliquet velit. In libero nisi, aliquet eget tristique in, aliquet a quam. Nam ligula orci, euismod posuere fermentum at, bibendum eget tellus. </p>
    </div>
    <div class="content">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut feugiat, sapien et imperdiet ornare, lacus lacus porttitor arcu, quis vehicula dui urna vel justo. Nam a quam vitae mauris lacinia egestas eget non metus. Phasellus tristique dictum adipiscing. Maecenas auctor tellus et est suscipit congue. Cras sollicitudin accumsan mollis. Nullam massa dui, gravida ac facilisis at, tristique eget velit. Mauris consectetur rhoncus mi ullamcorper tristique. Sed vitae aliquet velit. In libero nisi, aliquet eget tristique in, aliquet a quam. Nam ligula orci, euismod posuere fermentum at, bibendum eget tellus. </p>
    </div>
</div>
</body>
</html>

Bear in mind that f you have fixed width content inside the columns then you should set a min-width on each column equal to the widest element or perhaps hide the overflow.