I am new to HTML, and I understand all of the functionality I’ve learned so far but am having trouble with making things look the way I want. The main question I have is, how come, if I put elements (so far I’ve tried headers, paragraphs, buttons, plus others) within a div, they don’t necessarily appear inside that div on the website?
Other than that I would also appreciate any tips regarding the simplest/most common/best ways of placing elements precisely where you want them. Is it just with margins and padding? Using class=“row”?
I’m also confused about margin and padding as well. It seems sometimes when I adjust it, that outer object shrinks or grows to adapt, whereas other times the inner object moves to adapt.
The first question is my most pressing so if you only can answer that one, thank you in advance!
Here’s the pen: http://codepen.io/seangc/pen/ZKRGre
I’d like for my three buttons to appear inside the purple division (I’m trying to copy the sample).
Hi,
I think ypu’ll get better results if you ask very specific questions. Please provide a code snippet or a link to a pen and tell us exactly what it’s doing/not doing that is a problem.
Oh ok. Here’s the pen: http://codepen.io/seangc/pen/ZKRGre
Notice how the three buttons are within the
by id “banner” in HTML, but they’re not all inside the
in the viewer…
Hello,
Try searching for flexbox which will be pretty handy in such kind of situations,
More than that I have improved little bit of your code:
My Portfolio
About
Projects
Contact
try with that…
May be this what you want…
You are explicitly specifying the height of that div in your CSS. It is simply doing what you tell it to, it is making that div 80px high. If you want it to extend to contain the buttons, remove the height. (You can add margin to the buttons or padding to the div if you want some space there.)
If you want the div that tall and want the buttons to the side, add display: inline-block; to the buttons’ CSS.
As shrey says, there are other options too.
Thank you both. So, just to make sure I have this right: putting elements inside other elements in HTML does not mean the inner elements will appear physically within the outer element, just that they are children of the outer element?
Ehhh, I’d say usually they, unless you put something that overrides it.
