Div overlap when width set to 100% but not when width set in pixel?

Question

0.00/5 (No votes)

See more:

I'm working on a layout for practice and there I set a wrapper Div and set the Width in CSS 100% and also its min-width:800px, but inside of this wrapper Div other content get overlapped when I resize the window. My html page

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
    <link href="~/Content/themes/MyStyle.css" rel="stylesheet" />
    </head>
<body>
    <div id="wrapper">
        <div class="header">
            <div style="display:inline-block;width:400px;margin:5px 0 0 100px">This is my site</div>
            <div style="display:inline-block;width:500px;margin:5px 0 0 20px"><input type="text"/>  <input type="button" value="Search"/>  </div>
            <div style="display:inline-block;margin:5px 0 0 50px">@Html.Label("","LogIn","")       @Html.Label("SignIn")</div>
        </div>
    <div>@RenderBody()</div>
        </div>
</body>
</html>

My Css

CSS

body,html,div,form {
margin:0;
padding:0;
}


#wrapper {
width:100%;
min-width:800px;
}

.header {
width:100%;
height:35px;
background-color:rosybrown;
}

So my problem is that if I set it in pixel then my header div is not expending on large screen and also the content of it will be hide on small screen. I'm completely out of idea's and Googled this problem but not got any solution.

Here is the jsfiddle[^] in case any one want to check out

Posted 13-Nov-15 16:35pm

Ajvirk

Add a Solution

2 solutions

Solution 1

I suggest you to use Bootstrap[^]. - Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.
The navbar[^] from it would solve your problem.

-KR

Posted 13-Nov-15 18:31pm

Krunal Rohit

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

The Doer · Accepted Answer · 2015-11-14T02:21:00

Solution 2

My Suggestion :Bootstrap[^] is one of the best solution for the variant screen device 's UI development.

A percentage means that depending on the width of the window, the width will change. A pixel width means that no matter the window size, the width will always be the same.

One has application for fluid-layouts (%) and the other for fixed-width layouts (px).

TorubleShooting : Try setting

style="float:left;" //left/Right/Center as per your control's position

For your application where the size of the screen is not fixed , go for (%). And the child content inside the

must to be specified with (%) percentage.

Posted 14-Nov-15 2:21am

The Doer

Updated 14-Nov-15 2:25am

Comments

Ajvirk 19-Nov-15 20:45pm

Float is working for me great, thanks for the tip. By the way one thing in my mind that everything works fine now when I resize the window but my parent DIV height doesn't get affected. Actually I want it to hold my content according to the windows resize. I you wan to understand just try it to resize the browser and then see the header DIV part of the Code project.

The Doer 22-Nov-15 22:27pm

Yes , you are right . Re-sizing the window to support all your tags is supported in Bootstrap. You can implement Bootstrap to achieve this functionality.