CODEWITHSUNDEEP
htmlcss
DanSuh
DanSuh

Reputation: 51

CSS Positioning with browser resizing

div {
    position: absolute;
}

.header {
    width:100%;
    margin-top: 5%;
}

.content {
    width:100%;
    margin-top: 15%;
}

Browsed many answered questions about layout and browser resizing but I just can't seem to get it. Is it the use of % instead of px that makes my header and content divs overlap as I shrink the window width? Window height resizing doesn't cause the overlap, however.

Upvotes: 2

Views: 121

Answers (4)

Mi-Creativity
Mi-Creativity

Reputation: 9654

You have two options, either work with percentages values % but remember to set this html, body{ height:100%; } in your CSS, in the below example you see the image is 2500px by 1500px but its height is 30% and it works properly in this

JS Fiddle 1

html, body{ height:100%; }
img{ height:30%; }
<img src="//placehold.it/2500x1500/00aa00/ffffff?text=sample image">

Because we have set the height for html and body tags, while in this

JS fiddle 2

img{ height:30%; }
<img src="//placehold.it/2500x1500/00aa00/ffffff?text=sample image">

it doesn't take the 30% height even though the img css hasn't changed and this is because the html and body height is not defined.

Another way to have responsive width and height is to use the viewport units (1), vw and vh for width and height respectively. Here you don't need to specify the height value for the parent or the html, and body and it works just fine (2)

JS Fiddle 3

img{ height:30vh; }
<img src="//placehold.it/2500x1500/00aa00/ffffff?text=sample image">

-------------------------------------------------------------------------------

Upvotes: 1

John Slegers
John Slegers

Reputation: 47091

The problem here is that you're using margin-top: 5%;.

That percentage is relative to your width, not your height! As a consequence, your margin changes whenever you change the available width.

Use eg. px or em based margins to avoid this!

Upvotes: 1

Aidan Boyle
Aidan Boyle

Reputation: 66

In relevance to @Josh Crozier, the element is relative to the parent. When your browser is the main parent, its going to alter its children. Unless you want to exactly position everything bit by bit, you should avoid using absolute positioning unless you have to. Try making objects that are 100 percent width, but aren't absolute so they follow the normal flow. Then nest an element for your content so you can position that individually and then inside that, position your content.

<div class="outer_element">
     <div class="inner_element">
         <div class="relative_element">
             <h2 class="absolute_element">I am a title for things</h2>
         </div>
     </div>
</div>

Then set styles for outer and inner. One for responding to the browser width, and another to respond to the size of your document.

outer_element: { width:100%; }
inner_element: { max-width: 1140px; width: 1140px; margin:0 auto;}
relative_element: { position:relative; }
absolute_element: { position: absolute; top:x% or px; left:x% or px; }

This is just one way to do it but hopefully it helps you understand what I'm trying to convey. If not, let me know.

Upvotes: 2

Elezar
Elezar

Reputation: 1511

I'm guessing that when you shrink the width, it's causing the content of the header to wrap. Since you're not specifying an explicit height for the header, its height will grow as necessary to fit its contents. So if the header content wraps, it's going to get taller, and once its more than 15% of the height of whatever parent element has an explicit height, it's going to overlap the content.

If you just want the header and content to resize as necessary, but keep their relative positions to each other, then you can just remove the absolute positioning. In that case, as the header height grows when its content wraps, the content div will move down as necessary.

Upvotes: 1

Related Questions