Member Avatar for ForestTech

Hi guys,

I'm having some trouble with (i think) my CSS. Basically what it's doing is, when I align an image to the right hand side of the page, it's bleeding over the edge (i.e. I can only see 20px or so of the left hand side of the image and the rest is off the edge of the page). I can't upload the site just yet, but as soon as I can I'll update the post.

The code in question is:

<!-- HEADER -->
<div id="header">
    <a href=""><img src="images/tllogo.gif" class="logo" /></a><img src="images/header.gif" class="header" />
</div>
<!-- CONTENT -->
<div id="content">
<!-- Menu -->
    <div id="menu">
        <ul>
            <li>
                HOME
            </li>
        </ul>
    </div>
<!-- Information Area -->
    <div id="info">
        <h1>HOME</h1>
        <img src="images/kbvan.jpg" style="float: right" />
    </div>
</div>
<!-- Footer -->
<div id="footer" class="onblue">
    <p style="vertical-align: middle;">&copy; Copyright 2007 - KB Hire and Sales. Website Design by <a href="" target="_blank" class="onblue">Forest Technology</a>.</p>
</div>

and the CSS is:

div
{
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    vertical-align: top;
}

#header
{
}

#content
{
    background-color: #FFFFFF;
    width: 100%;
    padding-right: 20px;
}

#menu
{
    background: #006699 url('images/menushim.gif') repeat-y fixed left top;
    position: fixed;
    width: 206px;
    border: 0px;
    float: left;
    top: 152px;
    height: 100%;
}

#info
{
    background: #FFFFFF none no-repeat fixed right center;
    position: fixed;
    float: left;
    padding: 20px;
    left: 206px;
    height: 100%;
    width: 100%;
}

#footer

{
    background: #006699 url('images/footershim.gif') repeat-y fixed left top;
    width: 100%;
    height: 30px;
    position: fixed;
    text-align: center;
    bottom: 0px;
}

Any help would be greatly appreciated.

Thanks in advance
ForestTech

  • 3 Contributors
  • 4 Replies
  • 183 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by ForestTech

Dani AI

Generated

The visible symptom (only a thin sliver of the right-floated van image showing) is not caused by the image itself or by vertical-align. As hinted, vertical-align on blocks isn’t relevant here. The root cause is the layout: the content area is fixed and offset from the left while also given a full width, so its right edge sits past the viewport. The floated image is aligning to that container’s (out‑of‑viewport) right edge and thus appears cut off.

A couple of safe fixes:

/* fixed layout: constrain both sides instead of using full width */
#info {
  position: fixed;
  top: 152px;     /* under the header */
  left: 206px;    /* beside the menu */
  right: 0;       /* keep the right edge inside the viewport */
  bottom: 30px;   /* above the footer */
  padding: 20px;
  overflow: auto;
}

or keep normal flow and drop the fixed positioning:

/* flow layout: let the page scroll normally */
#info {
  margin-left: 226px; /* leave space for the menu */
  padding: 20px;
}

Notes and quick checks: remove float:left from elements that are position:fixed (float does nothing on positioned elements). Replace inline image styling with a class and add a defensive rule such as max-width:100%; height:auto; so large images never overflow. Use browser dev tools to view the computed box edges (outline the container temporarily) — that will confirm whether the container, not the image, is extending past the viewport.

Credit to for spotting the inline style and to for the vertical‑align clue; the practical fix is to constrain the content container’s right edge rather than giving it a 100% width while offset from the left.

Recommended Answers

All 4 Replies

Member Avatar for autocrat

Could you tell us which Iamge you refer to?
You also have Inline styling, which will always overide/take priority external styling.

Member Avatar for ForestTech

Haha... fair point.

The image I was referring to is the kbvan.jpg in the info area.

<!-- Information Area -->
    <div id="info">
        <h1>HOME</h1>
        <img src="images/kbvan.jpg" style="float: right" />
    </div>

The inline styling ideally shouldn't be effecting this image...

Cheers
ForestTech

Member Avatar for MidiMagic

That vertical-align: middle may be shoving stuff around. It's intended for table cells, not p elements.

Member Avatar for ForestTech

That didn't seem to work.

It's ok, I think I'll change the design a bit anyway, so hopefully it won't matter too much. Oh well.

Thanks HEAPS anyway guys!
ForestTech

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.