- This topic is empty.
July 19, 2017 at 8:21 pm #256902Historical Forums UserParticipant
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/weLVyOJuly 19, 2017 at 11:57 pm #256903JeroenRParticipant
First of all, let me say there is no just one way of doing this, but…
The width of the
asideis larger than the 960px from their parent
But also, the width of the
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#portfolioto 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
metatags and probably the script reference to modernizr. They should be in the
headinstead of the
Good luck!July 20, 2017 at 6:03 am #256908Historical Forums UserParticipant
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/weLVyOJuly 20, 2017 at 6:29 am #256909JeroenRParticipant
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.
- The forum ‘CSS’ is closed to new topics and replies.