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?

Recommended Answers

All 5 Replies

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

Not relevent to a container in the center that im using

and im using boxes, any other suggestions?

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

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

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.