Mind blowing SEO improving and Google rank increasing Signature Rotator SEO Tool.
Home Home › Design & Development › How to Create a Website v
navigation How do you make a wrapper in css/html?

Thread: 

How do you make a wrapper in css/html?

Tags: How, you, make, wrapper, csshtml
Post ThreadNew Thread 
Post ReplyAdvanced Reply 
Similar Topics:

what is the difference between html and html5?

How to make inforgraphic?

How can I design website using CSS,HTML and PHP.

HTML

PHP vs HTML page?

Difference between HTML sitemap and XML sitemap

How can i make a website without any IT knowledge

html - <link> vs <a> SEO?

how to make website

How to make my website fast?
Ads
banner
banner
banner
banner
ivan
*
6
ivan Offline referral

Posts: 713
Joined: Jul 2013
Reputation: 6

#1
09-19-2013 -
Senior Member
What is wrapper in css and how do you make it?
Find
Reply
chod
*
85
chod Offline referral

Posts: 860
Joined: Jul 2013
Reputation: 85

#2
09-19-2013 -
Posting Freak
CSS
Code:
#wrapper {
    width: 500px;
    margin: 0 auto;
}

HTML
Code:
<body>
    <div id="wrapper">
       Centered div with 500px width text on page
    </div>
</body>

Adjust margin to your needs
Code:
margin-left: auto; margin-right: auto;
Are other options auto being the easiest to make sure it's centered.
www.AdminEmpire.com
www.BlimptonTech.com - Best Free Online JavaScript tool to minify JavaScript files.
Find
Reply
maya
*
34
maya Offline referral

Posts: 1,058
Joined: May 2013
Reputation: 34

#3
09-19-2013 -
Posting Freak
Good post chod. Wrapper that is what keeps everything inside it together!
Find
Reply
ivan
*
6
ivan Offline referral

Posts: 713
Joined: Jul 2013
Reputation: 6

#4
09-19-2013 -
Senior Member
Thanks chod I appreciate that
Find
Reply
invisibe_dude
*
24
invisibe_dude Offline referral

Posts: 825
Joined: May 2013
Reputation: 24

#5
01-04-2014 -
Posting Freak
Here is how you should properly design your website in order to keep everything where it belongs!

HTML code

PHP Code:
<body>
    <div class="wrapper">
    <div class="header"></div>
    <div class="content"></div>
    <div class="footer"></div>
    </div>
    </body> 

CSS code

Code:
html,
    body {
    margin:0;
    padding:0;
    height:100%;
    }
    .wrapper {
    min-height:100%;
    position:relative;
    }
    .header {
    padding:10px;
    background:#5ee;
    }
    .content {
    padding:10px;
    padding-bottom:80px;
    }
    .footer {
    width:100%;
    height:80px;
    position:absolute;
    bottom:0;
    left:0;
    background:#ee5;
    }

This code is great because it helps to keep footer at bottom of screen!
Find
Reply
Post ThreadNew Thread 
Post ReplyAdvanced Reply 





User(s) browsing this thread: 1 Guest(s)