Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Miguel Leon
Miguel Leon
1,720 Points

img and nav alignment

i am making a webpage, for my heading i want to put an image in the left side and to the right my nav, when doing it my image gets on top of my nav, how can i align them?

2 Answers

Robert Richey
PLUS
Robert Richey
Courses Plus Student 16,352 Points
Robert Richey
Robert Richey
Courses Plus Student 16,352 Points

Hi Miguel,

Check out Centering in CSS by CSS Tricks. If you still have questions after reading through this, please post your code so that we can see what's going on.

Cheers

josue exhume
josue exhume
20,981 Points
josue exhume
josue exhume
20,981 Points

Hi There. I believe that this is what you wanted.

HTML:

<header class="main-header">
    <div id="holder_for_pic"> <h2> Hi I'm an Img </h2></div>
            <ul class="main-nav">
                <li><a href="#">Link 1</a></li>
                <li><a href="#">Link 2</a></li>
                <li><a href="#">Link 3</a></li>
                <li><a href="#">Link 4</a></li>
            </ul>
        </header>

In the code below i used the CSS float Property, which can take in these values none|left|right|initial|inherit http://www.w3schools.com/cssref/pr_class_float.asp

I floated the div that will hold the picture to the left and floated the links right.

heres a jsfiddle: https://jsfiddle.net/exhumejosue/trrwuptw/

so you can play around with it yourself.

CSS:

#holder_for_pic{
    background:gray;
    float:left;
}
.main-nav li {
    display:inline-block;
    background-color:gray;
    float:right;
}

I hope this help.