I have a <h1> tag that is set to float left, and the width is definitively set.

I also have a <div> tag with some text in it that is set to float right, that ideally would start on the same level as the <h1> tag.

However, for some reason, it's as if the <h1> tag comes with a built-in 'clear: both;' because no matter what I try, the <div> starts BELOW the <h1> tag (on the next line).

What is up with this?

Edit 1: The webpage: http://redwoodprep.com/class_type/3

I want the top of the 'ACT' h1 tag to align with the top of the right-most div, which starts with 'Redwood's Customer Commitment' and has a gray background.

Edit 2: So, the float/margin thing worked on the page above, but i realized that wasn't the case i'd been trying to fix. The correct link should have been http://redwoodprep.com/class_type/1, which has a separate div with a title 'Complimentary Preparation Materials.' That is the troublesome page I haven't been able to fix...

Thanks for the help!

4 answers

0
points

has the div a set width too?

try display:inline on the <h1>

Answered over 6 years ago by Tony Crockford
  • the div also has a set width. i tried display:inline on the header tag, and it made it get pushed to the right, and telling it to float: left; made it go back to how it was with the incorrect spacing hatorade over 6 years ago
0
points

It's because <h1> tags are block elements. Changing the element to display:inline-block or display:inline should fix your woes. Then, you'll be able to set the div to float:left instead of having multiple items thrown around in different directions away from the flow of the site.

I'd encourage you to use display:inline-block because it will use parameters such as width, padding, margin, etc. (display:inline does not; it follows the default rules of a <span>)

Answered over 6 years ago by Vinny Burgh
  • i set the display to inline (inline-block did nothing), and the h1 tag just floats to the right now, and gets pushed out of the way by ANOTHER div that's set to float: left. essentially, the page has an h1 at the top, then below it two divs; one is float left, one is float right. I want the float right one to be level with the top of the h1, but right now it's level with the top of the other div to the left. setting the h1 to inline made the left-most div take its place, so the h1 got pushed to the right instead... hatorade over 6 years ago
  • inline-block won't do anything unless you set some parameters. You should try setting the h1 tag to width: 50% after you make the display: inline-block. Then make the div to appear to the right, width:50%. I don't understand how it wouldn't work. Hmm. Are you subtracting from widths when you add paddings / margins? Vinny Burgh over 6 years ago
0
points

We need to see your actual code...

Something else must be at fault, or your source order needs to change... floated items need to come first, perhaps that's it? or float everything?

Answered over 6 years ago by Tony Crockford
  • how do i add a link to the page? i remember when i made the post, it had an option to add a link to the page, and it would save the source and i believe take a screen shot. is that option still available..? hatorade about 6 years ago
0
points

float the h1 and adjust the margin on the sidebar to suit.

or move the h1 into the leftmost column div.

Answered about 6 years ago by Tony Crockford