Padding Problems

HTML-CSS
1

Hello! So I’m trying to add padding to my nav element, but the padding isn’t quite working, the elements should be centered but they aren’t.

https://codepen.io/goprime/pen/EELxwb

1 Like
2

Okay Lets’s See What Happens if we:

  1. Add a (margin: 10px;) in The CSS ‘div’
    • Gets Your Code Output Within “LightBlue” color In The “LightCoral” Color BoX!

’

Screenshot_1
Screenshot_11365×588 71.1 KB

  1. i) Add a br tag after The Starting nav element
    ii) Try adding br tag after The Starting div element. (try without using br tag after
    Starting nav tag)
    (also try with nav element)
    iii) Try As you See in the Picture

As I am Not able to put More that a Photo.

  1. As a Final Result and A Final Task
    https://commons.wikimedia.org/wiki/File:Code-pen-Screenshot-3.jpg

As I am Not able to put More that a Photo.

2 Likes
3

Maybe this helps

Codepen - Simple Navbar with float

greets :slight_smile:

2 Likes
4

HI! And I think who Questioned wants to know How to get Them At The Center.

So If it is my fault Then Forgive me and If I am right At least give me A THumbs up–

5

The thing to center is

for the nav:
  • position: absolute; (or fixed)
  • width: 100%;
for the li’s:
  • display: inline-block;

and then i pull the right float back in with margin-right,
i think this can be solved far more elegant with css-flexbox.

greets

2 Likes
6

You are facing issue of how browser show Float elements.

When you apply float to an element, the element will be taken out of the parent element (in this case <ul>) hence the <ul> has height of 0px (use Dev Tools to see this)

Your

render with 60px height only because you have padding: 30px (top 30px and bottom 30px added up to 60px), remove the padding on div and you will see the lightblue disappear.

To allow parent element gain full height of child that is floated you will need to clear the float. Here is how you use clearfix.

In your case, you will need to add the clearfix css to the <ul> and you will see the <li> elements will be vertically centered. Total height of the lightblue bar are padding of div + li (content height).

clearing%20float
clearing%20float2638×1106 387 KB

2 Likes
7

SO Then The question Was About "creating a Menu " Wasn’t it?

8

A extra Pop-up

If you have completed first 92 Tasks Then You can Make The “menu” Bar With A very Different Way.

Try To reach There!!

9

Can’t Understand “Render” … ?

10

Render mean showing to the screen.

11

And Also Adding "clearfix Rules, I can’t See Any difference… (I just STarted 4 Days Ago)

12

Thanks! I really DId not know that Before. But Using “clearfix” I can’t See ANything TO be happened.

13

I have attached a screenshot hoping it clear up the solution. :rofl:

so you will have to add .clearfix class to the css. copy paste the code from this link

then on the html <ul>, add clearfix class. so it become <ul class="clearfix">

1 Like
14

And I do not need to Delete “float: right” and “float: left”

15

Correct, you don’t have to delete the floats.

The point of that clearfix is to fix the “bug” of floating elements. If you don’t use any float, you won’t need clearfix.

1 Like
16

As I have Thought Before. And I also Think That You have Too far Than me In Coding… So please Stay in Touch WIth Me.

17

Hi, thank you for the help! unfortunately I was trying to find a way to fix the inner content’s padding(which works by both ways below). Good luck for your journey!

1 Like
18

Hi! Thank you!, both the solutions(this and the other clearfix one) work perfectly, thanks for the help!

19

Hi! This works perfectly, thanks for the help!