Member Avatar for lewashby

I'm trying to create this site with a solid black top bar the extends from the left img all the way to the right of the screen, then add some text on top of the horizontal block. I created the block just find but when I went to add text on top of it, it extended the block down under the text and to the rest of the screen to the right. What I want is the the text to be aligned 50% left right of the black bar and 50% vertical of the black bar. Which is why I tried wrapping my divs the way they are. The image is w=200, h=266, here is my html and css.

CSS

body { background-color:#5E5858; margin:0px }

#topbar div
{
    display: block;
    position:relative;
    left:200px;
    position:absolute;
    top:0px;
    width:100%;
    height:266px;
    background:black;
}

#heading div
{
    position:relative;
    color:green;
    top:50%;
    right:50%;
}

html

<!DOCTYPE html>

<html>
    <head>
        <title>Test Site</title>
        <link rel="stylesheet" type="text/css" href="style.css">
        <style="text/css" />
        </title>
    </head>
<body>
<img src='assets/pic.jpg' />
<div id='topbar'>
    <div id='1'>

<div id='heading'>
    <div id='1'>Welcome to</div>
</div></div></div>

</body>
</html

>

  • 2 Contributors
  • 5 Replies
  • 259 Views
  • 11 Hours Discussion Span
  • Latest Post Latest Post by JorgeM

Dani AI

Generated

Quick checklist and a simpler, more robust approach for (and a note for ’s float answer).

The root cause: mixing absolute positioning with width:100% and offsetting the same element (left:200px) makes the black block overflow and behave unexpectedly. The HTML also has a few problems that prevent predictable layout: a stray style="text/css" tag, duplicate id="1" values, and a missing closing </html>. Fix those first — IDs must be unique and use classes for repeated styling.

A modern, easy solution is to put the image and the black bar in a single flex container so the image keeps its fixed width and the bar automatically fills the rest of the row; then center the text vertically and horizontally with flex properties. Example structure and CSS:

<div class="header">
  <img class="logo" src="assets/pic.jpg" alt="logo">
  <div class="bar">
    <div class="heading">Welcome to</div>
  </div>
</div>

.header { display:flex; margin:0; }
.logo  { flex:0 0 200px; width:200px; height:266px; object-fit:cover; }
.bar   { flex:1; background:#000; display:flex; align-items:center; justify-content:center; height:266px; }
.heading { color:green; }

Why this helps: the image remains a fixed column, .bar grows to the right edge, and align-items:center vertically centers the heading without hacks. If you must use absolute positioning instead, make the parent position:relative and on the child use top:50% plus transform:translateY(-50%) to truly center vertically — and avoid width:100% together with a left offset; prefer left:200px; right:0; or use flex.

Troubleshooting tips: check the browser inspector for overflow, avoid numeric-only or duplicate IDs, add alt text for the image, and use box-sizing:border-box if you add padding. Good groundwork from — float works, but flexbox is simpler and more future-proof.

Recommended Answers

All 5 Replies

Member Avatar for JorgeM

Maybe something like this to at least get you going...

<!DOCTYPE html>
<html>
<head>
<title>Test Site</title>
<style>
body { background-color:#5E5858; margin:0px }
#left
{
   float:left;
   width: 200px;
   height: 266px;
}
#right
{
   margin-left:200px;   
   height:266px;
   background:black;
}
#text
{
    color:green;
    position:relative;
    color:green;
    top:50%;
    left:50%;
}

</style>
</head>
<body>


<div id='topbar'>
 <div id='left'>
   <img src='assets/pic.jpg' />
 </div>
 <div id='right'>
    <div id="text">
      Welcome to...
    </div>
  </div>
</div>
</body>
</html>
Edited by JorgeM
Member Avatar for lewashby

Thanks, I'll give this a try. Kinda new to CSS, when position is relative, what is it relative to? Thanks again.

Member Avatar for JorgeM

Its relative to its intended position. In other words, relative to where it is supposed to be.

Member Avatar for lewashby

I don't see topbar anywhere in your css but it's referenced in your html?

Member Avatar for JorgeM

True, its not required, but I left it there to group both left and right div within one container in the event there are other properties you want to style that are common to both left and right.

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.