Specific div positioning

Question

I'm trying to set a header for a webpage that looks like this:

header

and here's the code I'm trying so far:

HTML

<header id="top-section">
  <div class="content-wrapper">
      <div class="float-left">
          <a href="../Home/Index"><img src="http://upload.wikimedia.org/wikipedia/commons/a/ac/Approve_icon.svg" alt="SustIMS" width="50%" height="50%" /></a>
      </div>
      <p class="user-info">
          <div class="user-info">
          Welcome Jon
          </div>
      <div class="float-right">
          <a href="Index">
          <img class="toolbar-icons" alt="Home" src="http://htiins.com/wp-content/uploads/2012/10/home-icon.png" /></a>
      </div>
      </p>
  </div>
</header>

CSS

body {
  font: 13px/20px 'Lucida Grande', Tahoma, Verdana, sans-serif;
  color: #404040;
  background: rgba(240, 240, 240, 1); 
  border: 2px solid red;
}

.float-left {
    float: left;
    width: 200px;
    border: 2px solid cyan;
}

.float-right {
    float: right;
}


#top-section
{
    border: 4px solid blue;
    height: 120px;

}


.user-info
{
    float: right;
    font-family: Rockwell, Consolas, "Courier New", Courier, monospace;
    font-size: 1.25em;
    border: 2px solid green;

}

.toolbar-icons
{
    float: right;
    width: 100px;
    height: 100px;
    clear: both;
    border: 2px solid orange;
}

Here's the Fiddle.

I've set borders in different colors to better understand the divs positioning.

How can I achieve something like the image above?

Thanks

*EDIT**

Maybe this explains better what I'm looking for: here's how it should look like:

example

Thanks for some great answers so far!

Do you want something like this: http://jsfiddle.net/appleBud/S4Nqj/ — AppleBud, Jun 16 '14 at 08:43
Which is **the image** and which are **the icons**? what about the expected size, spacing etc of icons..? — T J, Jun 16 '14 at 08:44
@TJ check the edit on the question. I can manipulate the spacing with margin, padding, etc., but the positioning of the things is my issue here. The image is set inside the content wrapper on the left and the user info and icons are on the right: user info on top of the icons — chiapa, Jun 16 '14 at 08:56
Just use two divs with 50% width and keep text-align left and right respectively. — Mr_Green, Jun 16 '14 at 08:58

score 2 · Accepted Answer · answered Jun 16 '14 at 08:45

2

Move

<p class="user-info">
<div class="user-info">
      Welcome Jon
</div>

into our float-right div and give header the css style of

header{
    overflow:hidden;
    padding:10px;
}

to end up with this result.

http://jsfiddle.net/P9Zjx/

answered Jun 16 '14 at 08:45

James

4,146
1
20
35

`DIV` inside `P` ? no : http://stackoverflow.com/questions/8397852/why-p-tag-cant-contain-div-tag-inside-it – Aurélien Grimpard Jun 16 '14 at 08:47
@AurélienGrimpard The Div isn't inside the P tag. To be honest, thanks, I didn't notice that the p tag wasn't closed but if you read defau1t's answer in the link you posted you'll see the p tag is automatically closed by the div element anyway. – James Jun 16 '14 at 09:14
Thanks @judgeja! That made it for me, just had to tweak it a bit with the actual images I'm using – chiapa Jun 16 '14 at 09:24

score 1 · Answer 2 · answered Jun 16 '14 at 09:26

1

I'm not sure what dimensions you want to work with and whether this is supposed to be responsive, e.g. stacked on mobile devices, but this should help you get closer to what you want. I cleaned up the code a bit ...

http://jsfiddle.net/7VR85/2/

answered Jun 16 '14 at 09:26

Charles Ingalls

4,521
5
25
33

score 0 · Answer 3 · answered Jun 16 '14 at 09:15

I have updated your code like below. Changing some tag and adding some style property to your fiddle.

  <header id="top-section">
  <div class="content-wrapper">
  <div class="float-left">
      <a href="../Home/Index"><img src="http://upload.wikimedia.org/wikipedia/commons/a/ac/Approve_icon.svg" alt="SustIMS" width="50%" height="50%" /></a>
  </div>
  <div class="float-right">
      <div class="user-info">
      Welcome Jona  </div>

      <a href="Index">
      <img class="toolbar-icons" alt="Home" src="http://htiins.com/wp-content/uploads/2012/10/home-icon.png" /></a>

  </div>     
</div>    
</header>

FIDDLE DEMO

Specific div positioning

3 Answers3