CODEWITHSUNDEEP
htmlcssformatting
Jason Posit
Jason Posit

Reputation: 1323

CSS: Best way to format layout

I would like to know what the best way is to format the following layout: (with eveything aligned and spaced neatly):

enter image description here

Here is the HTML:

<div class"wrapper">
  <img alt="Image 1" src="images/image1.png" />
  <div class="description">
    <h1>Heading 1</h1>
    <p>Paragraph 1</h1>
  </div>
</div>

I tried the following but the vertical-align property does not seem to be working as I cannot align the top of the h1 with the top of the image:

img, div.description {
    float: left;
}

div.description { margin-left: 10px; vertical-align: top; }

h1 { background: blue;  }
p { background: red; }

What if instead of how the right hand side part is displayed below, we wanted the right hand side to also be vertically centered instead of being top aligned?

Here is the JSFiddle link:

http://jsfiddle.net/johngoche99/ZPKZj/1/

OK, to keep the text from dropping down below when the browser is resized it is necessary to specify the width of the wrapper element to something like 700px. Then it works.

Thanks.

Upvotes: 1

Views: 477

Answers (5)

SlightlyCuban
SlightlyCuban

Reputation: 3255

Vertical-align only works on tables. If you want to do that with divs, you could try using display: table:

<div class="table">
  <div class="row">
    <div class="cell">
      <img alt="Image 1" width="100" src="http://images.nationalgeographic.com/wpf/media-live/photos/000/005/cache/green-iguana_563_600x450.jpg" />
    </div>
    <div class="cell" id="stuff">
      <h1>Heading 1</h1>
      <p>Paragraph 1</p>
    </div>
  </div>
</div>

And the CSS:

.table { display: table; }
.row { display: table-row; }
.cell { display: table-cell; }
#stuff { vertical-align: middle; }

This has the advantage of not being dependent on sizes/margins of elements, but is unsupported in IE7 and below. As all things in life, display: table is a tradeoff.

Upvotes: 1

Mujtaba Fadhil
Mujtaba Fadhil

Reputation: 6116

in css you need to do this

img{
    float: left;
    height: 300px
}

div{
    float: left;
}

h1{
    padding: 10px;
    background-color: #584480;
    color: #fff;
    font-weight: normal;
    font-size: 25px;
    margin: 0 0 10px 10px;
}

p{
    padding: 10px;
    background-color: #E24480;
    color: #fff;
    font-weight: normal;
    font-size: 25px;
    margin: 0 0 10px 10px;
}

nothing more ...

Hope this will help you ...

Upvotes: 2

Kees Sonnema
Kees Sonnema

Reputation: 5784

I think you want something like this:

JSFIDDLE

You want to use css here. You will add an ID to the first div like <div id="wrapper"> this is your main div. Then in the second div you add <div id="headings"> for the headings. then in your css add the beneath code. (note: this isn't the best css code ever. but it works :))

html:

<div id="wrapper">
  <img alt="Image 1" src="http://images.nationalgeographic.com/wpf/media-live/photos/000/005/cache/green-iguana_563_600x450.jpg" />
  <div id="headings">
    <h1>Heading 1</h1>
    <p>Paragraph 1</h1>
  </div>
</div>

css:

#wrapper{
width: 960px;
margin: 0 auto;
}

#wrapper img{
    float: left;\
    margin-right: 40px;
    padding-right: 40px;
}

#headings{
    position: relative;
    float: left;
}

h1{
    margin-top: -5px;
}

Hope it helps!

Upvotes: 1

Andy K
Andy K

Reputation: 7292

It looks you markup need a little change to be more, khm right; HTML:

    <div id="all">
    <div id="sidebar">
      <img class="side_image" alt="Image 1" src="http://images.nationalgeographic.com/wpf/media-live/photos/000/005/cache/green-iguana_563_600x450.jpg" />
    </div>
    <div id="main">
        <h1>Heading 1</h1>
        <p>Paragraph 1</h1>
  </div>
</div>

CSS:

#sidebar { float: left; }
#sidebar { margin-right: 40px; }
h1 {
    margin-bottom: 30px;
    margin-top: 0;
}

link to look how it will be: http://jsfiddle.net/56Z7C/1/

Upvotes: 1

Joe
Joe

Reputation: 6416

This can be accomplished with simple CSS.

img, div{
    float: left;
    margin: 10px;
}

http://jsfiddle.net/ZPKZj/2/

IRL, do NOT use this CSS. It is far too generic to be useful in any production environment. You might give your elements IDs or classes to allow the rules to be much more specific.

Upvotes: 1

Related Questions