My second column is not floating to the right

HTML-CSS
1

Please I need someone to help me check why my second column is not floating to the right.

Below is the codepen link
https://codepen.io/Shukar77/project/editor/ANwqob

2

Hi there,

Maybe you need to this to be a CodePen project for some reason. But IMO, your question would be easier to answer if it were a Pen instead of a Project. In CodePen, you can have unlimited Pens, but only one Project. A Pen would allow people to locally change the HTML and CSS to test solutions, but the files in the Project is read-only.

Pen vs. Project.

3

Ohk
Will do right away

4

Here is the new codepen url

https://codepen.io/Shukar77/pen/yLaGZWP

5

Hi again,

You don’t need to put all the stylesheet links in the html because the CSS is in the CSS section. Codepen does all the work linking them.

If you put borders around all your divs like so:

* {
  border: solid;
}

You will see that your ul in services is keeping your column from floating to the right. Change the CSS here to fix that:

.services ul{
    float: right;
    list-style: none;
    position: relative;
    top: -70px;
}

I would suggest using flexbox instead of positioning and floating. Once you get the hang of it, it’s much more flexible.

6

Thanks once again, It’s actually my first time using codepen

I will try out all your suggestion

7

Thanks for your contribution, but when I use flex-box the ul doesnt seem to align with the h2.

It keeps going below the h2

Any suggestion on what to do?

8

What happens if you put the h2 and ul in it’s own div, and make that div display: flex.

9

Hello FCC,

I have tried everything I know including all of @cherylm suggestion but I seem not to be getting it and other suggestions would be entertained

@cherylm could you please help me recheck the code and try it out yourselves, maybe am not really getting what you are saying

10

Hi Chukwuka,

I have to run, but did you remove the styesheets from the CSS? I don’t know, but CodePen might be trying to display the stylesheets and the CSS in box.

I’ll return at some point today.

11

OK. Not sure why I’m the only one replying. I think I figured it out though.

  1. In the HTML, remove all the style sheet links. If I keep them in, it doesn’t work.

  2. Add this to your CSS:

.row {
  display: flex;
  justify-content: space-between;
}

I think that’s what you want your columns to do. I should also point out, this is only one way to do this. We could have used grid, which I haven’t used since completing the Responsive Web Design projects. Or we could have used positioning and floating by floating the column 1 left and column 2 right. But from what I’ve read, people are using flex and grid and steering away from floats.

Anyway, I hope this has been helpful.

12

Thank you very much @cherylm for taking your time to respond to my questions.

Grid gave me exactly what I wanted

1 Like
13

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.