split div tag into 2 sections

[Gill1978]

Hi all,

I've got a div tag within in a header, and I'd like to split it into 2 sections next to one another.

However whatever I try the sections go one below the other.

Can anyone help ... been a long weekend I think ...

<div id='wrap'>
<div id='header'>
  <p align="left"><img src="logo_image.jpg" alt=" " width="79" height="83" /><span class="ccorner style2">PAT UK LTD </span><span class="style4">Nationwide Portable Appliance Testing</span></p>
  </div>

Thanks everyone ....

 

[Vragabond]

1. You have no div tag in your #header.
2. We would need to see the CSS that controls that structure to advise you better.

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]

 

[BabyJeffy]

Try this approach:

<div id="headerWrap">
  <div id="headerLeft">
    <img src="logo_image.jpg" alt="" width="79" height="83" />
  </div>
  <div id="headerRight">
    Nationwide Portable Appliance Testing
  </div>
</div>

And the supporting CSS:

#headerWrap {
  position: relative;
  height: 83px;
}
#headerLeft {
  float: left;
  width: 79px;
}
#headerRight {
  float: left;
}

It's a starting point, anyhow.

Cheers,
Jeff

[tt]Jeff's Blog [!]@[/!] CodeRambler

http://www.coderambler.com/

http://www.coedit.co.uk/

[/tt]

Make sure your web page and css validates properly against the doctype you have chosen - before you attempt to debug a problem!

FAQ216-6094

 

[Gill1978]

Hi there!!

Here's the contents of the .css file:

body {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 0.8em;
 margin: 18px;
 background-color: #CCCCCC;
 background-image: url(bg.gif);
}
#wrap {
 padding: 4px;
 background-color: #97D9EC;
 border: 1px solid #229ABD;
}
#wrap #header {
 background-image: url(header_bg.jpg);
 background-repeat: repeat-x;
 line-height: 83px;
}
#wrap #nav {
 line-height: 38px;
 background-image: url(nav_bg.jpg);
 padding-right: 14px;
 padding-left: 14px;
 text-align: center;
}
#wrap #nav a {
 color: #96C600;
 font-weight: bold;
 text-decoration: none;
 font-size: 1.2em;
 font-family: Arial, Helvetica, sans-serif;
}
#wrap #special #lcorner {
 background-image: url(left_corner.jpg);
 background-color: #FFFFFF;
 background-repeat: no-repeat;
 background-position: left bottom;
 width: 30px;
}
#wrap #nav a:hover {
 color: #229ABD;
 text-decoration: none;
}
#wrap #main #left_content {
 background-color: #FFFFFF;
 float: left;
 width: 160px;
 margin-top: 0px;
 margin-right: 5px;
 margin-bottom: 5px;
 margin-left: 0px;
 padding: 3px;
 border: 1px solid #229ABD;
}
#wrap #main #footer {
 background-color: #FFFFFF;
 padding: 3px;
 margin-top: 4px;
 margin-right: 0px;
 margin-bottom: 4px;
 margin-left: 0px;
 clear: both;
 text-align: center;
}
#wrap #main #footer a {
 color: #333333;
 text-decoration: none;
}
#copy {
 font-size: 0.8em;
 color: #333333;
 text-align: center;
}
#copy a {
 color: #333333;
 text-decoration: none;
}

#wrap #main #content a {
 color: #96C648;
 text-decoration: none;
}
#wrap #main #content a:hover {
 color: #229ABD;
 text-decoration: underline;
}
#wrap #special .ccorner h3 {
 color: #96C600;
 margin-top: 0px;
 margin-right: 2px;
 margin-bottom: 0px;
 margin-left: 2px;
 padding-top: 0px;
 padding-right: 2px;
 padding-bottom: 0px;
 padding-left: 2px;
}

#wrap #main #content {
 margin-top: 0px;
 margin-right: 0px;
 margin-bottom: 5px;
 margin-left: 170px;
 background-color: #FFFFFF;
 padding: 5px;
 border: 1px solid #229ABD;
}
#wrap #special {
 margin-bottom: 5px;
}
#wrap #special .ccorner a {
 text-decoration: none;
 color: #229ABD;
 font-weight: bold;
}
#wrap #special .ccorner a:hover {
 text-decoration: underline;
}


#wrap #main #left_content h2 {
 background-color: #229ABD;
 color: #FFFFFF;
 font-size: 1.1em;
 padding: 3px;
}
#wrap #main #content h1 {
 color: #96C600;
 border-bottom-width: 1px;
 border-bottom-style: dotted;
 border-top-color: #96C600;
 border-right-color: #96C600;
 border-bottom-color: #96C600;
 border-left-color: #96C600;
 font-size: 1.5em;
}
#wrap #main #left_content a {
 color: #96C600;
 text-decoration: none;
 display: block;
 border-bottom-width: 1px;
 border-bottom-style: dotted;
 border-top-color: #96C600;
 border-right-color: #96C600;
 border-bottom-color: #96C600;
 border-left-color: #96C600;
 padding: 3px;
 margin: 2px;
}
#wrap #main #left_content a:hover {
 color: #229ABD;
 text-decoration: none;
}


#wrap #special #rcorner {
 background-image: url(right_corner.jpg);
 width: 30px;
 background-color: #FFFFFF;
 background-position: right bottom;
 background-repeat: no-repeat;
}
#wrap #special .ccorner {
 background-color: #FFFFFF;
}

Thanks

 

[Vragabond]

I cannot see anything in your CSS that would relate to any elements in your header. The only declaration that relates to the header is the #wrap #header {} itself. So I would expect you to have a paragraph with an image and at the baseline of the image some text.

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]

 

[BabyJeffy]

Gill1978 - maybe you missed my post. Take a look and let us know if this works for you.

Cheers,
Jeff

[tt]Jeff's Blog [!]@[/!] CodeRambler

http://www.coderambler.com/

http://www.coedit.co.uk/

[/tt]

Make sure your web page and css validates properly against the doctype you have chosen - before you attempt to debug a problem!

FAQ216-6094

 

[Gill1978]

Hi BabyJeffy,

I tried what you suggested, but this removed all the background colour/ imaging?

Thanks

Julie

 

[BabyJeffy]

Take the page, strip it back to it's bare minimum and go from there.

Add a little bit of markup, [!]check the page validates[/!], test across your browser matrix. Repeat.

I find testing changes in isolation is a good way to confirm they do what I want before I then integrate them into a larger page.

Your HTML may need modification to work the way you want it to (in fact, I bet you it does).

Take "baby steps" and you will succeed (hopefully learning something along the way).

Cheers,
Jeff

[tt]Jeff's Blog [!]@[/!] CodeRambler

http://www.coderambler.com/

http://www.coedit.co.uk/

[/tt]

Make sure your web page and css validates properly against the doctype you have chosen - before you attempt to debug a problem!

FAQ216-6094