How to set min-width of a page?

Question

0.00/5 (No votes)

See more:

I added: style='...', but the page does not display as expected. Using mouse, the page's width can be adjusted. What's the proper way to do it?

The related codes (simplified, HTML + css) are posted below:

<!DOCTYPE html>
<html >
    <head>
    </head>

<body class="dbootstrap"   >

<div class="appHeader">
    <div class="headerTitle">
        <span id="headerTitleSpan">
            Washington xxxxxx Map Viewer
        </span>
        <div id="subHeaderTitleSpan" class="subHeaderTitle">
            by xxxxxxxx
        </div>
    </div>
    <div class="headImgButtons">
        <div class="headerLinksAdd">
            <div id="addDijit">
                <img id='imgAddRecords' src="images/DataAdd.png" alt="Add Records" title="Add Records" />
            </div>
        </div>
        <div class="headerLinksEdit">
            <div id="editDijit">
                <img id='imgEditRecords' src="images/EditingAttributes32.png" alt="Edit Records" title="Edit Records" /> 
            </div>
        </div>
    </div>
</div>

        
<!--<div class="app1" style="visibility:hidden;">-->
<div id="add_div" class="app1" >
	….
</div> <!-- "add_div"  -->
</body>
</html>

HTML

body, html {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    /*font-family: Tahoma;*/
    font-size: 12px;  /* before 14px */
}
.appHeader {
    background: url("../images/linen.jpg") repeat-x scroll left top transparent; 
    /* background: url("../images/MetroBackgound.png") repeat-x scroll left top transparent; */
    height: 100px;  /* 70px for  Default.2aspx */ 
    margin: 0;
    padding: 0;
    width: 100%;
}
.appHeader2 {
    background: url("../images/linen.jpg") repeat-x scroll left top transparent; 
    /* background: url("../images/MetroBackgound.png") repeat-x scroll left top transparent; */
    height: 80px;
    margin: 0;
    padding: 0;
    width: 100%;
}
.appHeader .headerLogo {
    float: left;
    left: 30px;
    position: relative;
    top: 3px;
}
.appHeader .headerTitle {
    color:  #FFFFFF; 
    float: left;
    font-size: 20pt;  /*16pt; */
    font-weight: bold;
    left: 60px;
    top: 7px;  /* 15px for  Default.2aspx */ 
    position: relative;
}
.appHeader .subHeaderTitle {
    color: yellow;
    font-size: medium;  /*small;*/
    padding-left: 20px;
    bottom: 3px;
}
/* .appHeader .search {
    float: left;
    left: 80px;
    position: relative;
    top: 18px;
}  */
/* 08/21/2015 - Tool Icons   */
.appHead .headImgButtons {
    position:absolute;
    margin-left:200px;
}
.appHeader .headerLinksAdd {
    float: right;
    color: #FFFFFF;
    position: relative;
    top: 10px;
    right: 310px;
    text-align: right;
    width: auto;
}
.appHeader .headerLinksEdit {
    float: right;
    color: #FFFFFF;
    position: relative;
    top: 10px;
    right: 240px;
    text-align: right;
    width: auto;
}
.appHeader .headerLinksHelp {
    float: right;
    color: #FFFFFF;
    position: relative;
    top: 10px;
    right: 170px;
    text-align: right;
    width: auto;
}
.appHeader .headerLinksInfo {
    float: right;
    color: #FFFFFF;
    position: relative;
    top: 10px;
    right: 100px;
    text-align: right;
    width: auto;
}
.appHeader .headerLinksLogout {
    float: right;
    color: #FFFFFF;
    position: relative;
    top: 10px;
    right: 30px;
    text-align: right;
    width: auto;
}

.appHeader .headerLinks {
    float: right;
    color: #FFFFFF;
    position: relative;
    top: 27px;
    right: 10px;
    text-align: right;
}
/* Tool Icons   */
.appHeader .headerLinks a {
    color: #FFFFFF;
}

Posted 15-Dec-15 1:36am

s yu

Updated 15-Dec-15 9:07am

v2

Add a Solution

Comments

Afzaal Ahmad Zeeshan 15-Dec-15 7:54am

You cannot control the width of a browser!

Also, if this is being overridden, consider applying !IMPORTANT to it to make it a compulsory property. Can you show a screenshot?

s yu 15-Dec-15 9:53am

Can't add an image in the thread since it does not provide the capability.

2 solutions

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)

AnvilRanger · Answer 1 · 2015-12-15T01:56:00

Solution 1

The answer is quite simple. You cannot and you should not do this! The browser is a sandbox and just displays the content and should never interact with anything outside the browser without the user's permission. You do not control the user's system, so why should you be allowed to control the size of the browser window. Also what about devices that are less than 900 pixels wide? You are shutting out most of the mobile market.

What you need to do is step back and look at your design and ask why do I need the minimum width?It looks like you are working with Bootstrap. I would suggest finding resources for that and take a second look at your design.

Posted 15-Dec-15 1:56am

AnvilRanger

Comments

s yu 15-Dec-15 8:37am

Ranger: Thanks for your response. I should present my problem in another way and see if you can help.
Below is the code for the headbar on my page. When I reduce the page width through mouse, the images in the <div class="headImgButtons"> will be on the top of <div class="headerTitle">. What I want to do is to make the headbar (or the page) with a min. width to avoid the overlaying problem. Please have your advisory how to do it if you can. Thanks.
<div class="appHeader">
<div class="headerLogo">
<img alt="logo" src="images/wmata.png" height="50" />
</div>
<div class="headerTitle">
<span id="headerTitleSpan">
Washington Metro Monument Map Viewer
</span>
<div id="subHeaderTitleSpan" class="subHeaderTitle">
by WMATA GIS
</div>
</div>
<div class="headImgButtons">
...
</div>
</div>

AnvilRanger 15-Dec-15 11:22am

Please update the original question with this html markup and your CSS and I will take a look and try to be of some help.

s yu 15-Dec-15 15:07pm

Ranger: Thanks for your response. See my update content w/ related codes.

Sergey Alexandrovich Kryukov 15-Dec-15 11:10am

Nice explanation, a 5.
—SA

s yu · Answer 2 · 2015-12-16T04:24:00

Solution 2

Prob. solved by adding
min-width: 1080px;
into html { } in my main.css. The thread can be closed. Thanks for your review.

Posted 16-Dec-15 4:24am

s yu