Positioning An Image Next To A Menu Bar With Html/css

I am very new to html and css. I am trying to build my first website. I would like to have a picture on the same line as a nav bar, with the picture to the left. I first tried u

Solution 1:

 <sytle> // Put this in css
  .anynames{ // this css is for position an image to the left
   position:relative;
   float:left;
  }
 </sytle>

    <div id="anynames"> //<---- Id this use to indicate specific DIV
     <img src="images/basil.jpg" alt="picture here" height="20%" width="20%" />
        </div>

If this is correct Mark it if this is not We Finds ways :D

Solution 2:

There are two common methods of forcing two block (commonly div) elements to sit beside each other.

Floats

Floats are used to force elements to strictly align along the left or right of a page. However, they are also useful for placing two block elements beside one another:

div.image {
    float: left;
}
nav {
    float: left;
}

See this Fiddle

One key advantage floating elements over inline blocks is that floating elements don't have a default margin to space text (see Inline blocks section).

You can also change the code under nav to float: right; which will separate the image and nav on separate sides of the screen.

Inline blocks

Inline blocks are often used to display block elements inside a paragraph. But since two inline elements are placed beside each other given enough room, we can use these to position blocks horizontally:

div.image {
    display: inline-block;
}
nav {
    display: inline-block;
}

And the Fiddle.

In the Fiddle I've colored the nav red to show the space in between the two elements. If you did the same for the floating elements, you'll see no space between the image and the nav. However, here there is a small margin caused by the default spacing given to inline-block elements - the browser wants to put space between an inline element and the surrounding text. To get rid of the space, you must add

body {
    font-size: 0;
}
nav {
    font-size: 12pt;
}

Why would you want no spacing? We often want widths described in percentages. However, if you were to keep the spacing while specifying percentages that add up to 100%, the second element would spill over onto the next line because we didn't take the extra spacing into account: see this Fiddle.

Solution 3:

Your two elements div and nav need to be formated in CSS. Like this:

<style>.myDiv{
display:inline-block;
width:50%;
}
nav{
display:inline-block;
width:50%;
}
</style>

You must enter in a class for div to understand this code

<div class="myDiv">

The code inline-block will allow elements that are smaller then the remaining width of the page to be stacked beside it.

Hope this helps!