CODEWITHSUNDEEP
htmlcss
Travesty3
Travesty3

Reputation: 14489

Determine width based on percentage using only CSS

I have three columns (divs floating left), each with a width of 30% plus 3% padding. Each column contains an image that is 100px wide. Next to each image, I want to put a title/description next to that, which will take up the rest of the space in that column.

I know you can't do math in CSS, so we couldn't just do something like width: 33% - 100px; (would be awesome if you could). I could determine it with JavaScript, but I'm trying to avoid using JS for this task, if possible. I would rather see if anyone can come up with a better design where I wouldn't have to do that.

See my example on this fiddle.

Here is my HTML:

<div class="column3 item" style="border-right:1px dotted #CCC;">
    <img src="images/items/item1.jpg" />
    <div>
        <b>Item 1</b>
        <p>Some kind of description about the item goes here.</p>
    </div>
</div>
<div class="column3 item" style="border-right:1px dotted #CCC;">
    <img src="images/items/item2.jpg" />
    <div>
        <b>Item 2</b>
        <p>Some kind of description about the item goes here.</p>
    </div>
</div>
<div class="column3 item clearfix">
    <img src="images/items/item3.jpg" />
    <div>
        <b>Item 3</b>
        <p>Some kind of description about the item goes here.</p>
    </div>
</div>

And the relevant CSS:

.column3 {
    float: left;
    width: 30%;
    height: 100px;
    padding: 0 1.5%;
}

.column3 > div {
    float: left;
    margin-left: 15px;
}

.column3 > div > p {
    display: inline-block;
}

.item img {
    float: left;
    width: 100px;
    height: 100px;
}

So I need to figure out how to set the width of the inner div so that it will take up the rest of the space. I know I can do this with JS, but I would really prefer a CSS solution so that when the user resizes the page, it automatically adjusts that width (without having to call a JS resize event listener) and then all of my styling will be kept in one place, reducing the complexity.

None of this code is set in stone, so if you can suggest a better HTML/CSS structure, that would be a perfectly acceptable solution.

Upvotes: 3

Views: 336

Answers (3)

Arbel
Arbel

Reputation: 30999

Are you looking for this?

Demo

CSS:

.column3 {
    float: left;
    width: 30%;
    height: 100px;
    position:relative;
    padding: 0 1.5%;
}
.column3 > div {
    display:inline-block;
    border: 1px solid #0ff;
    margin-left:100px;
    padding-left:-100px;
}
.column3 > div > p {
    display: inline-block;
}
.item img {
    width: 100px;
    height: 100px;
    position: absolute;
    top:0;
    left:0;
}
/* clearfix */
 .clearfix:before, .clearfix:after {
    content:"";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    zoom: 1;
    /* For IE 6/7 (trigger hasLayout) */
}
/* END clearfix */

HTML:

<div class="column3 item" style="border-right:1px dotted #CCC;">
    <img src="http://dummyimage.com/100x100/000/fff" />
    <div> <b>Item 1</b>
        <p>Some kind of description about the item goes here.</p>
    </div>
</div>
<div class="column3 item" style="border-right:1px dotted #CCC;">
    <img src="http://dummyimage.com/100x100/000/fff" />
    <div> <b>Item 2</b>
        <p>Some kind of description about the item goes here.</p>
    </div>
</div>
<div class="column3 item clearfix">
    <img src="http://dummyimage.com/100x100/000/fff" />
    <div> <b>Item 3</b>
        <p>Some kind of description about the item goes here.</p>
    </div>
</div>

Upvotes: 2

Xarcell
Xarcell

Reputation: 2011

You can do math with CSS3.

width: calc(100% - 30% - 3%); /* width 100% minus column width, minus padding */

or 

width: calc(100% - 100px); /* width 100% minus image width */

Of course, use vendor prefixes:

width: -webkit-calc(100% - 30% - 3%); /* width 100% minus column width, minus padding */
width: -moz-calc(100% - 30% - 3%); /* width 100% minus column width, minus padding */
width: -o-calc(100% - 30% - 3%); /* width 100% minus column width, minus padding */
width: -ms-calc(100% - 30% - 3%); /* width 100% minus column width, minus padding */
width: calc(100% - 30% - 3%); /* width 100% minus column width, minus padding */

You can multiply, divide, whatever you need to do. David Walsh gives a few more examples: http://davidwalsh.name/css-calc . You can also see which browsers support it specifically: http://caniuse.com/calc . Opera is the only modern browser without support for it, however it's on it's way...

Upvotes: 0

Mark Parnell
Mark Parnell

Reputation: 9200

Remove the float on the inner div and make the margin large enough for it to fit alongside the image:

.column3 > div {
    margin-left: 105px;
}

The only downside of this is that if the description is longer than the height of the image, it won't flow across under the image, but will remain over to the side. You could achieve that by removing the margin altogether and instead making the p display: inline.

Upvotes: 0

Related Questions