how to create 3 columns in HTML+CSS and group 2 div elements in the third column

Question

I've an issue with creating 3 columns in HTML+CSS

This is the html code:

<div class="views-field-field-pdf-fid"></div>                
<div class="views-field-field-content-value"></div>
<div class="views-field-field-image-fid"></div>
<div class="views-field-title"></div>
<div class="views-field-field-date-value"></div>

What I want is 3 columns:

1st column: title, date-value
2nd column: image-fid
3rd column: content-value, pdf-fid

So far, I've tried to add float:right property to content-value, pdf-fid and image-fid. Unfortunately I cannot keep content-value and pdf-fid on the same column.

ps. I can swap the divs in the html code but not grouping them using parent divs. thanks

why can't you group them in parent divs? That's my solution to this layout. — Surreal Dreams
– Surreal Dreams, Commented Feb 2, 2011 at 22:03
You keep mentioning columns. Why don't you use a table? If you don't wanna use a table, why are you apposed to grouping them with a parent div? — MattoTodd
– MattoTodd, Commented Feb 2, 2011 at 22:05
With the conditions specified, it sounds like a riddle / homework assignment :-) — jeroen
– jeroen, Commented Feb 2, 2011 at 22:10
@Surreal Dreams @MattoTodd @Dutchie432 @jeroen So, does the riddle have a solution ? Or there is no way to do it without creating a parent div or table ? — aneuryzm
– aneuryzm, Commented Feb 2, 2011 at 22:21

jeroen · Accepted Answer · 2011-02-02 22:35:26Z

You will need to order the divs and use a combination of float:left / float:right and clear:left / clear:right. And perhaps use absolute positioning for the middle column.

Something like this should work if title is always smaller than content:

<!doctype html>
<html>
  <head>
    <style type="text/css">
            div {
                width: 32%;
                margin: 0 1% 0;
                padding: 0;
            }
        </style>
  </head>
  <body>
    <div class="views-field-field-content-value" style="background-color: #000; height: 300px; float: right;"></div>  
    <div class="views-field-title" style="background-color: #333; height: 100px; float: left;"></div>             
    <div class="views-field-field-image-fid" style="background-color: #666; height: 400px; position: absolute; top: 0; left: 33%;"></div>
    <div class="views-field-field-date-value" style="background-color: #ccc; height: 100px; float:left; clear: left;"></div>
    <div class="views-field-field-pdf-fid" style="background-color: #999; height: 100px; float: right; clear: right;"></div> 
  </body>
</html>

Dutchie432 · Accepted Answer · 2011-02-02 22:07:31Z

1

Why not just use a table?

<table>
<tr>
<td>
    <div class="views-field-title"></div>
    <div class="views-field-field-date-value"></div>
</td>
<td>
    <div class="views-field-field-image-fid"></div>
</td>
<td>
    <div class="views-field-field-content-value"></div>
    <div class="views-field-field-pdf-fid"></div>                
</td>
</tr>
</table>

answered Feb 2, 2011 at 22:07

Dutchie432

29.3k20 gold badges94 silver badges110 bronze badges

2 Comments

MattoTodd Over a year ago

I guess I should have put my suggestion as an answer (+1)

aneuryzm Over a year ago

I cannot create a table for the same reason I cannot create a parent div. I'm using a CMS (Drupal - Views) and adding items to a list

ngen · Accepted Answer · 2011-02-02 22:08:19Z

0

Not sure if you want equal width for all three columns but here's a start for you: http://jsfiddle.net/Xj6UC/

CSS:

#one {
    float: left;
    border: 1px solid green;
}
#two {
    float: left;
    border: 1px solid red;
}
#three {
    float: left;
    border: 1px solid blue;
}

HTML:

<div id="three">
    <div class="views-field-field-pdf-fid">pdf</div>                
    <div class="views-field-field-content-value">content value</div>
</div>
<div id="two">
    <div class="views-field-field-image-fid">image</div>
</div>
<div id="one">
    <div class="views-field-title">title</div>
    <div class="views-field-field-date-value">date value</div>
</div>

answered Feb 2, 2011 at 22:08

ngen

8,9662 gold badges21 silver badges15 bronze badges

4 Comments

MattoTodd Over a year ago

OP said "but not grouping them using parent divs"

MattoTodd Over a year ago

@Patrick -Why can't you use parent Div's? is jeroen right, are we solving your homework assignment?

aneuryzm Over a year ago

@MattoTodd Because I'm using Drupal, Views module to add the fields, and there is no such functionality

ngen Over a year ago

So why can't you use parent divs again?

Collectives™ on Stack Overflow

how to create 3 columns in HTML+CSS and group 2 div elements in the third column

3 Answers 3

Comments

2 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related