Creating a Portfolio

[Historical Forums User]

Hi,
I’m new here I’m creating a portfolio and I can seem to get my Aside section up to the right. My teacher had me wrap the whole thing in a div tag that limits width to 960px I think that’s dumb it doesn’t seem to flow very well thank you any and all help highly appreciated please only use basic css no js as it sprobaly a simple solution i am taking my first web design class.

my code can be seen here:
https://codepen.io/4thehalibit/pen/weLVyO

[JeroenR]

First of all, let me say there is no just one way of doing this, but…
The width of the div.info and the aside is larger than the 960px from their parent div#portfolio.
But also, the width of the div.info and the aside isn’t set.
So one think you could do, is set the widths, for example div.info: width: 49%, decrease the right margin (which is now 250px, I’ve set it to 25px like the other sides) and give the aside a width of calc(49% – 50px).
The 50px is then the sum of the margin-left and margin-right. I’d like to take 49% as half of the page because sometimes it just doesn’t fit. Anyway play around with these things will give you the result you want.

I’d also set margin: 0 auto; on the div#portfolio to center it, but that’s just a matter of taste maybe. And to let the thing be responsive, well, that’s another thing.

Another thing, a little out of scope, but I see title, link, and meta tags and probably the script reference to modernizr. They should be in the head instead of the body.
Good luck!

Example: https://codepen.io/jeroenreijs/pen/NgQPoK

[Historical Forums User]

@JeroenR

that looks really nice, the class I’m taking is an online class. It was much easier reading what you had to say versus looking back through all videos I’ve watched ive never even seen my teacher.

here’s what i came up with the pen doesn’t look as good as it really does in chrome
https://codepen.io/4thehalibit/pen/weLVyO

[JeroenR]

Ok, good work. If you set a width on your horizontalNav, for example 200px, you can subtract that as well as the margins of the info DIV.
left-margin = 25px, right-margin = 25px, horizontalNav = 200px. De info Div has a width of 49%, so what’s left = 51%, right?
So the aside should have a width of 100% – 49% – 200px – 25px -25px. So that would be: calc(51% – 250px). Then the 3 of them will fit nicely next to each other.

And you can wrap the images on the top of the page in 1 DIV to prevent them to appear on top of the other content. There is a lot of siblings in your page while its better and easier to style when you try to group elements in kind of sections.

[Author]

Posts