How do I set the width of the body

Question

0.00/5 (No votes)

See more:

How do I set the width of the body?

Default.aspx

ASP.NET

<asp:Content ID="ContentMain" ContentPlaceHolderID="MainContent" runat="server">
    <div id="container">
        <div class="header">
            <h1 class="text-muted">jQuery Basic Image Slider</h1>
        </div>
    </div>

    <div id="slider">
        <ul class="slides">
            <li class="slide"><img src="images/slider1.jpg" /></li>
            <li class="slide"><img src="images/slider2.jpg"/></li>
            <li class="slide"><img src="images/slider3.jpg"/></li>
            <li class="slide"><img src="images/slider4.jpg"/></li>
            <li class="slide"><img src="images/slider5.jpg"/></li>
            <li class="slide"><img src="images/slider6.jpg"/></li>
        </ul>
    </div>
</asp:Content>

Site.Master

HTML

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><body>
    <form runat="server">
    <div class="page">
        <div class="header">
            <div class="title">
                <h1>
                    jQuery Image Slider
                </h1>
            </div>
        </div>
        <div class="main">
            <asp:ContentPlaceHolder ID="MainContent" runat="server"/>
        </div>
        <div class="clear">
        </div>
    </div>
    </form>
</body>
</html>

Posted 26-Nov-14 7:19am

Teledextri

Updated 26-Nov-14 7:22am

v2

Add a Solution

2 solutions

Solution 2

In addition to the advice of the Solution 1, which should work for you:

Setting the fixed page size is a real nasty thing. The user working on a larger screen, and especially those having smaller one won't say you thank you, and, for some, it would be enough reason to never visit your site again. To make all content fit in a nice layout, you rather need to do something opposite: embrace liquid, fluid or elastic design. Please see my past answers:
Webpage screen resolution (Cross Browser\Cross Platform) problem[^],
To Get Screen resolution[^].

At the same time, there are situations where fixed sized can help; usually they are related to printer and the need to achieve exact sizes and locations of certain areas, as with label printing, for example. But in this case, you need to prescribe all sizes in physical units: inches, cm or mm (pt, pc). For CSS support of units, please see: http://www.w3schools.com/cssref/css_units.asp[^].

—SA

Posted 26-Nov-14 16:53pm

Sergey Alexandrovich Kryukov

Updated 26-Nov-14 16:58pm

v2

Comments

Afzaal Ahmad Zeeshan 27-Nov-14 3:23am

+5 for fixing my solution too, and for a good answer. :)

Sergey Alexandrovich Kryukov 27-Nov-14 3:27am

Thank you, Afzaal.
—SA

Maciej Los 27-Nov-14 17:16pm

+5

Sergey Alexandrovich Kryukov 27-Nov-14 23:38pm

Thank you, Maciej.
—SA

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)

Afzaal Ahmad Zeeshan · Accepted Answer · 2014-11-26T07:23:00

Solution 1

In your code you don't show any attempt to set the width of the body. However, you can either set it from the HTML markup as,

HTML

<body style="width: 50in;">
   <!-- forms here -->
</body>

.. or you can use the CSS stylesheet to add the document stylings, as

CSS

body {
  width: 500in;
}

..but you will need to link this stylesheet to the Master page for styling the pages with this style.

There are many other options that you can use, to set the Width of the body element, some might be ASP.NET client-side Css codes etc, but the above ones are an easy way.

Posted 26-Nov-14 7:23am

Afzaal Ahmad Zeeshan

Updated 26-Nov-14 20:24pm

v2

Comments

Sergey Alexandrovich Kryukov 26-Nov-14 22:55pm

I voted 5, but some notes:
I believe your example would be more useful if you used cm, mm or inches. In such units, fixed size would be useful at least in some cases (printer support), and pixels would mean the attempt to fix some screen size, which would be a really bad idea.
I tried to explain it in my answer, please see.
—SA

Afzaal Ahmad Zeeshan 27-Nov-14 2:24am

Totally worth it! I still remember last days I posted another link to an answer saying A pixel is not a pixel. And right now, I forgot it myself!

I will update my answer as you say, but you can tell me how centimeter is better than pixel? Because centimeter is also measure similarly, and it will be same on a 17" screen of mine or 32" LED monitor at my friends'. What makes them different?

.. and thanks for 5 :-)

Sergey Alexandrovich Kryukov 27-Nov-14 2:43am

Centimeters are certainly better then pixels. Pixels will take different space on different screens. For page width, it's bad to have fixed size in pixels in general. But for printer, exact centimeters are needed. Regardless of the printer resolution, centimeters will be translated to centimeters on paper precisely.
Again, I explained it in my answer, please see it.
—SA

Afzaal Ahmad Zeeshan 27-Nov-14 3:22am

Oh yeah - I have already seen your answer, :-) good advice by you too. :)

Maciej Los 27-Nov-14 17:17pm

+5

Afzaal Ahmad Zeeshan 28-Nov-14 2:13am

Thanks Maciej. :-)