Member Avatar for tiffinlar

HTML:

<div id="header">
        <h1>Derby County Football Club</h1>
        <h2>Index Page</h2>
        <img class="logo" src="image/dcfc_logo.jpg" alt="DCFC Logo" width="120" height="120" /> 
      </div>

CSS:

#header{
position: relative;
  text-align: right;
  border: 1px solid #000;
  background: #FFFFFF;
  margin: 5px;
  padding: 3px;
}
.logo{

}

What i want is to display the H1 and H2 on the right, and have the logo on the left all in line with each other. any suggestions?

  • 2 Contributors
  • 5 Replies
  • 289 Views
  • 11 Hours Discussion Span
  • Latest Post Latest Post by Troy III

Dani AI

Generated

Short note: reordering the markup, as suggested, is the simplest and most robust approach because document order should reflect visual order. For anyone who wants an alternative that keeps DOM order (or prefers a modern layout), using CSS Flexbox gives precise horizontal alignment, vertical centering, and clean responsive behavior without floats.

Example (flexbox; keeps a centered container and places logo at left, headings at right):

<div class="container">
  <header class="site-header">
    <img class="logo" src="image/dcfc_logo.jpg" alt="Derby County logo">
    <div class="titles">
      <h1>Derby County Football Club</h1>
      <h2>Index Page</h2>
    </div>
  </header>
</div>
.container { max-width:900px; margin:0 auto; }
.site-header { display:flex; align-items:center; justify-content:space-between; padding:8px; border:1px solid #000; background:#fff; }
.titles { text-align:right; }
.logo { max-height:120px; width:auto; flex:0 0 auto; }
@media (max-width:600px) {
  .site-header { flex-direction:column; text-align:center; }
  .titles { margin-top:8px; text-align:center; }
}

If supporting very old browsers or avoiding flexbox, the inline-block + vertical-align approach is a good fallback: make the logo and the headings inline-block, set vertical-align: middle on both, and keep the container centered with max-width/margin. When using floats (as in earlier replies), remember to clear them (clearfix or overflow) so the parent box retains its height.

Troubleshooting tips: avoid unnecessary positioning rules that break flow (position:absolute/relative unless needed), set responsive image limits (max-width/max-height), and use descriptive alt text for accessibility. If you must keep headings before the image in the DOM but want the logo visually first, use Flexbox’s order property rather than absolute positioning—it's cleaner and more accessible.

Recommended Answers

All 5 Replies

Member Avatar for Troy III

float the image to the left
css: .logo {float:left}

Member Avatar for tiffinlar

Not relevent to a container in the center that im using

and im using boxes, any other suggestions?

Member Avatar for Troy III

The document flow must always follow the visual flow therefore the obvious is to order the alements according to that flow...

HTML:

<div id="header">
<img class="logo" src="image/dcfc_logo.jpg" alt="DCFC Logo" width="120" height="120" /> 
        <h1>Derby County Football Club</h1>
        <h2>Index Page</h2>
      </div>

Therefore (for it to Function) you should make (the hilighted) adequate change to your stuctural code too. You should remove that "position:relative" if you Iike to preserve the integrity of your boxes too! Thought you knew that - and don't forget to remove the right alignement of your headers also, - it looks better left-aligned, right by the image logo, to my taste ofcourse.
Regards

Edited by Troy III because: n/a
Member Avatar for tiffinlar

The document flow must always follow the visual flow therefore the obvious is to order the alements according to that flow...


Therefore (for it to Function) you should make (the hilighted) adequate change to your stuctural code too. You should remove that "position:relative" if you Iike to preserve the integrity of your boxes too! Thought you knew that - and don't forget to remove the right alignement of your headers also, - it looks better left-aligned, right by the image logo, to my taste ofcourse.
Regards

thanks, its sorted

Member Avatar for Troy III

you should mark "this thread solved" than.

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.