CODEWITHSUNDEEP
csslayouthtml
Jürgen Steinblock
Jürgen Steinblock

Reputation: 31723

How to achieve this layout with div and css?

I want to design a static webpage with a very easy and strict layout. I want to achieve this with div and css.

Here is an idea how it should look:

image HEADING                          -> .... Content continues here 
      teasertext tesertext             Content Content Content Content 
                                       Content Content Content Content 
      Content starts here ... Content  Content Content Content Content 
      Content Content Content Content  Content Content Content Content 
      Content Content Content .....->  Content Content Content Content 

      -----------------    -----------------
      |Large Image 1  |    | Large Image 2 |          Imagedescription
      |               |    |               |          Imagedescription
      |               |    |               |          Imagedescription
      -----------------    -----------------
      image copyright

The basic idea is to have a small image at the left (a red square). The rest of the page is aligned right to the image. First the heading followed by a teaser text.

The content area should be a fixed size and the text should overflow to the right area (if larger)

After that I have two images with a description to the right and a copyright below.

I have never done anything before with css / div and the biggest problem for me is how to define the content area as an overflow. I have been messing around with this for some time and can't figure out how to do this.

I hope this is an easy task for a experienced web developer, who can give me a hint.

This is what i have so far:

css:

*.left_area {
    padding:10px;
    text-align:left;
    width:40px; 
    float:left; 
} 

*.right_area {
    padding:10px;
    text-align:left;
    width:90%; 
    float:left; 
} 

*.heading {
    font-family:Tahoma,Arial,Verdana,sans-serif;
    font-size:16px;
    font-weight:bold;
    margin-bottom:10px;
}

*.teaser {
    font-family:Tahoma,Arial,Verdana,sans-serif;
    font-size:12px;
    font-style:italic;
    margin-bottom:10px;
}

*.content {
    width:50%;
    height:20px;
    float:left;
}

html:

<html>
<head>
<link type="text/css" rel="stylesheet" href="test.css">
</head>
<body>
<div class="left_area">
    <img src="square.png"  width="16" height="16" />
</div>
<div class="right_area">

    <div class="heading">
    Heading Heading Heading
    </div>

    <div class="teaser">
    Teaser Teaser Teaser Teaser Teaser Teaser
    </div>

    <div class="content">
    Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content 
    </div>

</div>

</body>

Upvotes: 1

Views: 267

Answers (1)

Arsen7
Arsen7

Reputation: 12820

Please see https://developer.mozilla.org/en/CSS/columns - I believe this is what you need to format the div.content element (or in general - the upper half of your page).

I am not sure whether the html you provided is really the one which you have drawn in that nice ascii-picture. But the large images seem to be simple to format. Just wrap all of them in some element (div maybe) with overflow:hidden - to give it a BFC (you may read about it at http://colinaarts.com/articles/the-magic-of-overflow-hidden/ ) , and add float: left or just leave them inline.

In general, I would suggest similar structure of HTML:

<div id="textSection">
  <h1>HEADING</h1>
  <p>Teasertext...</p>
  <p>Content...</p>
</div>
<div id="imagesSection">
  <div class="image">
    <img src=".." alt="..">
    <p>Image copyright or something</p>
  </div>
  <div class="image">
    ...
  </div>
  <div class="descriptions">
    <p>Imagedescription...</p>
    ...
  </div>
</div>

Apply columns to #textSection. Apply overflow:hidden to #imageSection. Apply float:left to #imageSection > * or (alternatively) if you want images and image descriptions to behave like table cells, just make them as such:

#textSection {
     -moz-columns: 2;
  -webkit-columns: 2;
          columns: 2;
}
#imagesSection {
  display: table;/* add width, margins and so on */
}
#imagesSection > * {
  display: table-cell;/* add widths, paddings, and so on */
}

I must admit that I have not tested that code, but I hope I did no grave mistake :)

Upvotes: 1

Related Questions