2 replies [Last post]
loungepenguin
loungepenguin's picture
Offline
Enthusiast
Brighton UK
Last seen: 2 years 47 weeks ago
Brighton UK
Joined: 2005-01-11
Posts: 213
Points: 20

Hi There,

I don't think there is actually any way around this but thought I'd see what you think.

Say I have a source code like this

HEADER
IMAGE
TEXT TEXT TEXT TEXT TEXT TEXT TEXT

I'd like the img to float right and the header and text to wrap around it. Like this:

The problem is that unless I set a width on the header, the header doesn't leave enough space for the image to move up so I get this (the header is going across the full width):

I could move the image above the header but that isn't very semantic. I don't really want to put a width on the header (this is something inside a CMS so its quite complicated).

Any ideas? Or am I just out of luck?

Much appreciated

AttachmentSize
header.jpg80.6 KB
HEADERNO.jpg93.29 KB
gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 7 hours 40 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9229
Points: 3235

You can do something like

You can do something like I've done (below), but the negative margin value is going to be fiddly; not robust at all. Use margin to control the heading. That will make its width liquid on change of the container width.

<!DOCTYPE html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>test document</title>
  <style type="text/css">
 
html, body {
    background-color: white;
    color: black;
    font: 100%/1.25 sans-serif;
    margin: 0;
    padding: 0;
    }
 
p img {
    border: 1px solid black;
    float: right;
    height: 150px;
    margin-top: -6.5em;
    width: 100px;
    }
 
h1 {
    margin-right: 110px;
    }
 
 
#wrapper {
    border: 1px dotted gray;
    margin: 0 auto;
    padding: 1.2em;
    width: 400px;
    }
 
  </style>
</head>
 
<body>
  <div id="wrapper">
    <h1>This is a long heading</h1>
    <p><img src="somepic.jpg" 
            alt="generic pic that floats right" />
      Fusce ut semper nisl? Nunc sed lacinia elit. Curabitur est purus,
      aliquam vel malesuada porttitor, interdum pellentesque metus. Sed
      at magna diam, ut suscipit augue. Mauris eget varius tortor. Sed
      quis aliquet lacus. Duis viverra risus eu arcu tincidunt
      euismod. Aliquam erat volutpat.</p>
  </div>
</body>
</html>

cheers,

gary

Unplanned code results in a tangled wad of brain-cramping confusion.

There are enough html & css demos and tutorials to be interesting. Please visit.

loungepenguin
loungepenguin's picture
Offline
Enthusiast
Brighton UK
Last seen: 2 years 47 weeks ago
Brighton UK
Joined: 2005-01-11
Posts: 213
Points: 20

Thanks Gary - I see what you

Thanks Gary - I see what you mean about the negative margin. I think it might be a case where semantics have to take a back seat and the image will just have to come before the text.

Cheers