Member Avatar for BenzZz

Hi,

I'm creating a website and currently working on the banner for it which is all contained within the 'logo' div that has a 900px width and 150px height.
For some reason the 'menu' div is not being positioned within the 'logo' div despite being contained in it within the html.
As the img takes up 500px width and 150px height within the 'logo' div I thought that the 'menu' div containing the links would be positioned to the right of the img within the 'logo' div as there is space however as stated, the 'menu' div is displayed outside the 'logo' div.

My html and css code is shown below:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta http-equiv="Content-Language" content="en-gb" />
        <link rel="stylesheet" href="master.css" type="text/css" />
        <title>Ben Plummer</title>
    </head>
    <body>
        <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
        <div id="wrapper">
            <div id="logo">
                <img src="benplummerlogo.png" alt="Ben Plummer Logo" />
                <a href="https://twitter.com/Ben_Plummer" class="twitter-follow-button" data-show-count="false" data-size="large" data-dnt="true">Follow @Ben_Plummer</a>
                <div id="menu">
                    <a class="menulinks" href="">Home</a>
                    <a class="menulinks" href="">About Me</a>
                </div>
            </div>
            <div id="pagecontent">
            </div>
            <div id="footer">
            </div>
        </div>
    </body>
</html>

CSS:

html {
    background: none repeat scroll 0 0 #e2e2e2;
    color: #66b7d2;
    height: 100%;
}

body, h1 {
    margin:0;
    padding:0;
    height: 100%;
}

#wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    width: 900px;
    margin-left: auto;
    margin-right: auto;
    background-color: #570614;
    font-family: Arial, sans-serif;
}

#logo {
    width: 900px;
    height: 150px;
    border-bottom: 2px solid #FFFFFF;
}

img#benplummerlogo {
    height: 150px;
    width: 500px;
}

.twitter-follow-button {
    margin-top: 50px;
    margin-left: 180px;
    position: absolute;
}

#menu {
}

.menulinks {
    color: #FFFFFF;
    text-decoration: none;
    text-align: center;
    font-weight: bold;
    /*border-top: 2px solid #FFFFFF;
    border-left: 2px solid #FFFFFF;
    border-right: 2px solid #FFFFFF;*/
    padding: 5px;
}

.menulinks:hover, .menulinks:active {
    color: #570614;
    background-color: #FFFFFF;
    text-decoration: none;
    text-align: center;
    font-weight: bold;
    /*border-top: 2px solid #FFFFFF;
    border-left: 2px solid #FFFFFF;
    border-right: 2px solid #FFFFFF;*/
    padding: 5px;
}

I'd really appreciate any help. Ideally I want the links underneath the twitter follow button just on top of the bottom border of the 'logo' div.
Thanks.

  • 2 Contributors
  • 3 Replies
  • 229 Views
  • 5 Hours Discussion Span
  • Latest Post Latest Post by JorgeM

Dani AI

Generated

Short diagnosis and a practical fix.

Two things are working against you: block-level elements (a plain div for #menu) will break the line after an un‑floated image, and an absolutely positioned element is positioned relative to the nearest positioned ancestor — not automatically the #logo div. That explains why the Twitter button and your links appear to be "outside" the banner even though they are nested in the HTML. was on the right track with a float for the logo image; combine that with a positioned container and you get predictable placement.

Suggested CSS additions (keep your existing width/height/border on #logo, just add these):

#logo { position: relative; }

/* allow content to flow beside the image */
#logo img { float: left; /* use your existing 500x150 sizing here */ }

/* position the follow button inside the banner */
#logo .twitter-follow-button {
  position: absolute;
  top: 50px;    /* tweak these until it lines up visually */
  right: 160px;
}

/* pin the menu to the bottom-right of the banner */
#logo #menu {
  position: absolute;
  right: 160px;
  bottom: 6px;  /* sits just above the bottom border */
}
#logo #menu .menulinks { display: inline-block; margin-left: 6px; }

Modern alternative: if you can change markup, wrap the Twitter link and #menu in a right-side container and use flexbox on #logo to align items and keep things responsive.

Quick troubleshooting notes: use position: relative on the container whenever you use position: absolute on children; prefer top/right/bottom/left for absolute placement instead of margins; if you float elements and need the parent to expand, apply a clearfix or overflow:auto/hidden on the parent. Finally, test with the live Twitter widget because the external script may replace the anchor with an iframe — inspect the DOM and adjust selectors or offsets as needed.

Recommended Answers

All 3 Replies

Member Avatar for JorgeM

Ok, so I looked at your code and found that it appears to you are trying to apply a style to your logo image. In your CSS (line #30), you are referencing an ID that doesnt exist in your code. It appears that you forgot to assign an ID to that image. If you update line #13 to the following, the page layout changes as shown in the image.

<img id="benplummerlogo" src="benplummerlogo.png" alt="Ben Plummer Logo" />

Capture24

By the way, i only styled you logo div with a background color of blue since i didnt have your image, just to get an idea.

Member Avatar for BenzZz

Ah thanks, but why have the Home and About Me links (within the 'menu' div) not moved into the 'logo' div underneath the twitter button?

Member Avatar for JorgeM

Ok, so then just apply a float:left; to img#benplummerlogo. That will move your navigation links to the right side of the logo.

From there you can apply some additional CSS to the menu links to shift them around.

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.