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 Yasin Atagün
Yasin Atagün
4,691 Points

Floating 3 element,image, content

In course teacher teach that when we got 2 section, we can float them with float:right and float:left seperately.

But what if we have 3x different div or section, how we float them in same line and also the 2nd one will be exact center?

3 Answers

Emma Cole
Emma Cole
12,183 Points

You need to remove the padding from .footer-baba and .footer-menu and also set the height of .footer-baba. You can see from my code example how i've made the menu inline.

<footer class="footer-baba">
        <nav class="footer-menu">

                <a href="#home"><li>home</li></a>
                <a href="#content"><li>content</li></a>
                <a href="#blabla"><li>blabla</li></a>
                <a href="#footer"><li>footer</li></a>

        </nav>
    </footer>

.footer-baba {
    background-color: #000;
    width: 100%;
    height: 30vh;
}
.footer-menu  {  
    height: 100px;    
    color: white;
    float: right;

    }

.footer-menu a  {
  display: inline-block;
  float: left;
}

Adding display: inline-block to your menu links will allow you to add margin and/or padding to them. Hope this helps :)

Yasin Atagün
Yasin Atagün
4,691 Points

Ty emiliy, i watched the lessons for box model. Padding, margin etc. Still cant get the features of it. I clearly understand padding and margin making spaces. But still cant get the main idea. Any suggestion for me?

Emma Cole
Emma Cole
12,183 Points

So the way that I think of padding and margin is that margin will make everything outside of the element move away from the element, whereas padding will make everything inside the element move away from the margin. You can only do this with block level elements though, such as div's and headings, so to add margin or padding to inline elements you have to add display:block or display:inline-block. Does that make sense?

Yasin Atagün
Yasin Atagün
4,691 Points

ty for helping again, and i mistyped your name. Sory for that.

Matthew Lang
Matthew Lang
13,483 Points
Matthew Lang
Matthew Lang
13,483 Points

Using floats really shouldn't be your primary way of laying out your webpage, for this reason exactly. What you're looking for is Flexbox, which can easily do this for you. It's more complicated than using floats, however it offers much much more layout options and flexibility. I highly recommend learning it. I also believe there are courses on Treehouse that cover the subject.

Here are some learning resources to help you: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ https://flexboxfroggy.com/

Yasin Atagün
Yasin Atagün
4,691 Points
Yasin Atagün
Yasin Atagün
4,691 Points

Thank you, i just learned basics for now. On the way for learning more. If you can answer me; In that codes, somehow my list items(menu) not being in footer section. Its being in other line. And secondly i couldnt figure out lining them horizontally

.footer-baba {
    padding-top:120px;
    background-color: #000;
}
.footer-menu  {
    padding-top: 120px;
    height: 100px;
    background-color: #000;
    color: white;
}

<footer class="footer-baba">
        <nav class="footer-menu">

                <a href="#home"><li>home</li></a>
                <a href="#content"><li>content</li></a>
                <a href="#blabla"><li>blabla</li></a>
                <a href="#footer"><li>footer</li></a>

        </nav>
    </footer>