Member Avatar for Jazerix

Hey there
I'm quite new with php, i create a small site that can control some function for a program i made in C#, however I'm having some trouble with the css :P i got a header, h1 and h2. the header and h1 is functioning as they should, however h2 is not place as i wanted it to. I was wondering what do i have to do to move it to the opposite of h1. Also when i give h2 a height/width it gets places on the same side as h1, without the dimensions i cannot set the gradient background to h2, any ideas? :)

this is what my css file looks like:

<?php 
header ("Content-type: text/css");
?>
body{
 background-image: url('Sky.jpg');
}
header {
 text-align: center;
}
h1 {
 font-size: 1em;
 background-image: url('ElementBackground.jpg');
 //background-color:#86B404;
 text-align: left;
 height:290px;
 width:350px;
}
h2 {
 font-size: 1em;
 text-align: right;
 //background-image: url('h2.jpg');
 //height:290px;
 //width:350px;
}
?>

oh, and i just realized that i should have posted this under Web Design > HTML and CSS sorry about that, hopefully a mod can move this :)

Edited by Jazerix because: n/a
  • 3 Contributors
  • 3 Replies
  • 203 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by Jazerix

Dani AI

Generated

Good call from — floating the two header elements is the straightforward way to get them side‑by‑side. A few practical notes and cleaner alternatives so the layout stays stable and easy to maintain (and so the gradient/backgrounds show up reliably).

Floats + clearfix (classic)

  • Float the left block left and the right block right, and make the header contain the floats with a clearfix pseudo‑element. Use classes instead of styling raw h1/h2 for predictable results.
header::after {
  content: "";
  display: table;
  clear: both;
}

header .left  { float: left;  width: 48%; }
header .right { float: right; width: 48%; text-align: right; }

Modern alternative — Flexbox (recommended)

  • Flexbox removes the need for floats and clearfix, makes vertical centering trivial, and is well supported.
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
header > * { flex: 0 0 auto; }

Troubleshooting and gotchas

  • Use valid CSS comments: /* comment */. // is not valid CSS and will break rules after it.
  • If the CSS is produced by PHP, ensure it is sent as CSS with no extra whitespace or BOM before the content-type header.
  • Prefer classes or wrapper divs for layout instead of styling semantic headings directly. That keeps semantics (h1/h2) separate from visual layout.
  • For background images/gradients, check background-repeat, background-position and background-size if the graphic looks wrong.
  • Use the browser devtools inspector to see computed sizes, floats, and to test the flexbox approach quickly.

Also note: was right to ask for the HTML — a minimal reproducible snippet helps pinpoint why a rule behaved unexpectedly.

Recommended Answers

All 3 Replies

Member Avatar for phfilly

Can you maybe post the html file?

Member Avatar for lps

using float:left and float:right to h1 and h2

commented: Worked! +3
Member Avatar for Jazerix

Thanks that worked! :D:D:D

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.