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


Tags: html,css

Problem :

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



Solution :

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>

    CSS Howto..

    Applying new css to elements with jQuery, how to add transition?

    How to keep styles after animation?

    How to load .css file from parent directory with .htaccess rule?

    How to get inputs in the same line with css?

    How to change text colour on a child structure HTML5

    How do I change the border lines COLOUR on the table view

    How to get rid of !important tags?

    How can I get mobile safari to use the right CSS?

    How can I vertically align this navigation bar?

    Using CSS how to change only the 2nd column of a table

    how do i fit background image to any screen?

    How can I toggle the background color of the body of my HTML document, with one button?

    How to reset the input css to the defaults in Bootstrap 3.2

    How to append the Pseudo-class (active) to

    Css tool, to calculate how many (in bytes) inline css in html

    How to control layering in HTML/CSS without making links nonfunctioning?

    How to make a shape which is made using css borders responsive?

    How to get the CSS width of a mobile device in ASP.NET MVC?

    How to rotate image used as list type in unordered list

    How to achieve multi column layout with inline images

    How can I add a css property to the first div with a specific class name?

    How To Add CSS & JavaScript Into Windows Form Application C#.net

    How to bump up text?

    How to combine html, js and css from fiddle

    How can I align my adsense graphics?

    How to use vertical menus in HTML and css?

    How to position the sharing buttons on upper-left corner of the game and not the view?

    Bootstrap shows black rectangles when printing focused input elements

    How can I make each section fit within the li box?

    Entire window becomes blur after a modal is shown jQuery why?