Html 5 & css

I am creating my first responsive HTML5 website. Up until this point, I’ve used tables to position things on my site. With regards to the header section, I’m having trouble getting things to line up the way I expect. Let me explain:

< header >
< div id=“icon” >icon.jpg< /div >
< div id=“Name” > Name of Site< /div >
< /header >

When the screen width gets smaller, the text wraps under the icon rather than moving up on top of itself and remaining to the right of the icon. How do I get the divs to be treated as invisible boxes that do not wrap to the next line? Also, I can’t add padding or margin to the text to move it up 8px off the bottom of the patent container.

To get the text to align to the right of the icon, I have set the display property of the 2 divs to inline.


If you want the text to be to the right of the icon, your best bet is to float the icon to the left.

Surely at some point, it will need to stack, yes?

Formatting tip for posting:

Use backticks around your code (3 of them before, 3 after) to display as a code block like so: (This : `)

<div id="icon">icon.jpg</div>
<div id="Name"> Name of Site</div>

Thanks for the float:left. The text now aligns to the right of the icon, and shrinks in the space to the right if the icon. unfortunately, the text aligns with the top of the icon rather than dropping to the bottom. padding, margin and vertical-align didn’t get it to move down. why?

inline-block may suit you better.

Now the text wraps under the icon. I feel like I should use a 2 cell 1 row table and set verticle-align:bottom on the text cell.

why is this so difficult? any good tutorials out there for HTML5 divs and aligning with CSS?

It will when there is not enough space in the window, something has to give to avoid horizontal scrollers appearing.

You could use display: table on the <header> and display: table-cell on the <div>s for a table-like layout. But don’t use <table> tags.

the table and table-cell works. now how do I vertical-align:bottom?

Put that on the cell :slight_smile: unless I’m misunderstanding…

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.