CODEWITHSUNDEEP
htmlcss
Denni199
Denni199

Reputation: 5

Website layout messing up when the browser is resized

As the title suggest, I'm having issues with creating my website. It's currently at the design stage and I'm having problems upon putting my browser into windowed mode.

Everything sort of re-aranges it self. If you scroll a bit you see some sections falling out of order.

I don't know what I did wrong, but I would very much like to fix this issue.

This is the link to my website as it stands: http://www.dennis-website.co.nf/index.html

Upvotes: 0

Views: 1773

Answers (4)

Azad Cebiyev
Azad Cebiyev

Reputation: 71

<div id="nav">

Your CSS must be:

#nav

{
width:100%
}

Upvotes: 1

Aayushi Jain
Aayushi Jain

Reputation: 2879

You have to make a responsive design website to overcome this issue. Here is a great book on Responsive Design by Ethan Marcotte. It will cover all topics of how to make responsive grid, responsive images and media queries + this is only 150 pages small free pdf :D

Upvotes: 1

Sarvap Praharanayuthan
Sarvap Praharanayuthan

Reputation: 4360

You need to use Media queries to adjust the font size, width of the elements and much more for various screen resolutions.

Example: http://webdesignerwall.com/tutorials/css3-media-queries

Upvotes: 1

jerrylow
jerrylow

Reputation: 2629

There's no minimum width set to the overall site. Your #container_main has width set at 1002px where as the rest of the site doesn't so the header and menu will collapse to the browser's width. You can quickly solve this by setting

#wrapper {
    min-width: 1002px;
}

So the overall site has a minimum width.

Upvotes: 2

Related Questions