No replies
Rischen
Offline
Regular
Johannesburg
Last seen: 18 years 2 weeks ago
Johannesburg
Joined: 2004-11-20
Posts: 43
Points: 0

Hi,

I'm new to this board. My name is Rischen.

Sorry I've got such a big question to lay on y'all first up but I've looked at this css layout problem a hundred ways and I can't figure a solution.

I've got a guide with little diagrams and text to the right of them, each headed by an h2. I've got the diagrams floated left in a css stylesheet but it means that if the text doesn't pass the image I can't get the same margin between the end of each diagram and each h2. I've tried putting each step in a div but it doesn't work.

I want this kind of thing:

STEP ONE

|image| text text text
|image| text text
|image|

STEP TWO

|image| text text text
|image|
|image|

STEP THREE

|image| text text text
|image| text
|image|

But floating the images to get the text to the right gives me

STEP ONE
|image| text text text
|image|
|image| STEP TWO

That kind of thing.

I've tried making the h2's clear left but it does this weird thing where it breaks the border I've put around this diagram div and making each h2 section into a div with top and bottom margins only gives me a margin from the text next to the image because the image is floated.

How can I make each little step sit in its own little box with the text to the right of the image? I could do a whole lot of absolute positioning and stuff but I'm sure there must be a simpler, good practice stylesheet way.

Here's a little piece if you'd like to put it into ye olde notepad and see what I mean.

Rischen

<style type="text/css">

body {
background-color: white;
margin-right: 0;
}

#diagrams {
height: 75;
width: 75;
float: left;
margin: 0 1em 1em 0;
}

#navigator {
margin-top: 4.8em;
float: left;
width: 8em;
}

margin-top: 5em;
float: right;
width: 8em;
border-style: solid;
border-color: #cccccc;
border-width: 0 0px 0 0;
}

#content {
margin: 6em 8em 0;
border-width: 0 1px 1px 1px;
border-style: solid;
border-color: #cccccc;
border-bottom-color: blue;
}

h1 {
font-family: arial;
font-size: 1.3em;
color: #3399cc;
line-height: 0.5;
}

h2 {
font-family: arial;
font-size: 1em;
color: #3399cc;
font-style: italic;
}

p {
font-family: arial;
font-size: 0.7em;
}

</style>

<body>

<div id="navigator">

<p>Navigate our site</p>
</div>

<p>Our friends. asdfasdf asdf asdf dsf dsf sdf sdaf sdf sdf asdf adsf asdfsdf dsfsdafasdf df dsf dfdfad fd </p>
</div>

<div id="content">

<h1>The Guide</h1>

<h2>Step One</h2>

<p><img class="imgover" id="diagrams" src="..\images\btdiagram1.gif" />Text text text text text text text text text text Text text text text text text text text text text Text text text text text text text text text text Text text text text text text text text text text Text text text text text text text text text text Text text text text text text text text text text</p>

<h2>Step Two</h2>

<p><img class="imgover" id="diagrams" src="..\images\btdiagram1.gif" />Text text text text text text text text text text Text text text text text text text text text text Text text text text text text text text text text Text text text text text text text text text text Text text text text text text text text text text Text text text text text text text text text text</p>

<h2>Step Three</h2>

<p><img class="imgover" id="diagrams" src="..\images\btdiagram2.gif" /> text text text text text text text text text text text text.</p>

<h2>Step Four</h2>

<p><img class="imgover" id="diagrams" src="..\images\btdiagram2.gif" /> text text text text text text text text text text text text.</p>

<p>You see what sort of happens there? Because the image is floated, the next element, the h2 margins itself away from the text and not the image and if the text doesn't go beyond the image I get the situation above. How, with good practice css can I have the image to the left and yet have the next element margin away from it and not wrap?</p>

</div>

</body>

Tags: