I have one wrapper which is fixed width for all of my pages, but what if i have a page with a content that needs to have a full width like for example slideshow.
HTML
<div id="wrapper">
//fixed width contents
</div>
CSS
#wrapper{
width: 960px;
margin: 0 auto;
}
I don't want to create another wrapper with full width like:
CSS
#wrapper-full-width{
width: 100%
}
HTML
<div id='wrapper-full-width'>
// some contents with full width like slideshow
</div>
So i only need one wrapper which i can use for all my pages.
HOMEPAGE
<div id="wrapper">
<div id="header"></div>
<div id="slideshow> // fixed width=960px</div>
<div id="footer"></div>
</div>
PRODUCT PAGE
<div id="wrapper">
<div id="header"></div>
<div id="slideshow"> // full width=100% </div>
<div id="footer"></div>
</div>
How can i use same wrapper for pages with contents that need to have a full width?
Well, there's two option: either add a class of fullwidth to the wrapper itself or to the <body> tag on that specific page:
<div id="wrapper" class="fullwidth">
<div id="header"></div>
<div id="slideshow"></div>
<div id="footer"></div>
</div>
#wrapper.fullwidth { width: 100%; }
Or:
<body class="fullwidth">
<div id="wrapper">
<div id="header"></div>
<div id="slideshow"></div>
<div id="footer"></div>
</div>
</body>
.fullwidth #wrapper { width: 100%; }
Related
Here is a codesandbox of what I have: https://codesandbox.io/s/still-surf-5vyy2
The pink square is stickied the way I want to but now I need to add a container so that the content doesnt stretch through the whole page.
THis is what the html looks like now:
<body>
<div style="height:200vh;background-color:blue">
<div style="width:50%;height:100vh;float:left;background-color:red"></div>
<div style="width:50%;height:50vh;float:right;background-color:pink;position:sticky;top:0">
<h1>I'm Sticky!</h1>
</div>
<div style="width:100%;height:100vh;float:left;background-color:green">
<div class="container">
<h2>I'm full width</h2>
</div>
</div>
</div>
<div style="width:100vw;height:75vh;background-color:white">
<h2>No sticky here</h2>
</div>
</body>
If I were to add:
<body>
<div style="height:200vh;background-color:blue">
<div class='container'> <--------------------------THIS
<div style="width:50%;height:100vh;float:left;background-color:red"></div>
<div style="width:50%;height:50vh;float:right;background-color:pink;position:sticky;top:0">
<h1>I'm Sticky!</h1>
</div>
</div>
</div>
<div style="width:100%;height:100vh;float:left;background-color:green">
<div class="container">
<h2>I'm full width</h2>
</div>
</div>
</div>
<div style="width:100vw;height:75vh;background-color:white">
<h2>No sticky here</h2>
</div>
</body>
It breaks the sticky. Does anyone have a better solution for this?
Really appreciate the help.
Your container div has no height. please add that rule to 100% in your css:
.container {
width: 90%;
max-width: 900px;
margin: 0 auto;
height: 100%;
}
Okay I do not know wether I have started completely wrong or just do not know how to get it right.
I want the layout of my website to be like this:
I put a div called 'myWrap' around the header and the content. And added this css:
.myWrap {
position: absolute;
padding: 0px;
margin: 0px;
background: white;
top: 2%;
left: 2%;
right: 2%;
}
.footer {
position: absolute;
background: #363130;
margin-top: 2%;
height: 300px;
left: 0;
width: 100vw;
}
And the footer is not in the myWrap-div. But now it is just floating behind the content because the position of the myWrap is absolute.
How do I put the header and content in the normal flow but infront of the background?
I structured the html like that:
<div class="row container-fluid myWrap">
CONTENT
<div class="container-fluid footer">
FOOTER
</div>
</div>
If I put the footer out of the myWrap div it starts floating around on the top or just overlaps the content/header
Change .myWrap to position: relative, your footer is getting the position absolute of the body, because It dosn't have a parent element with a relative position CSS atribute.
.myWrap {
position: relative;
}
With this, you will get your footer always on the bottom of myWrap. Then you can play with, the top/bottom properties and place it where you want ;)
I have created a Bootply to show it how it's working: http://www.bootply.com/8Wmx3CJHFv
Try this
<div class="myWrap">
<div class="container">
<div class="row">
Then add your footer after the end of the container
Personally, I would not work with your own wrapper. Bootstrap made them with a reason and that reason is they will work perfectly for responsive viewports.
I'd suggest you enhance something like this:
HTML
<html>
<body>
<header>
<div class="container">
<div class="row">
<div class="col-lg-12">
// content here
</div>
</div>
</div>
</header>
<section id="content">
<div class="container">
<div class="row">
<div class="col-lg-12">
// content here
</div>
</div>
</div>
</section>
<footer>
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
// content here
</div>
</div>
</div>
</footer>
</body>
</html>
CSS
body {background-color: #FFF;}
footer {background-color: #FFF;}
header {background-color: #FFF;}
.container-fluid {padding: 0 0;}
Just make sure you remove the padding for the .container-fluid. And a tip: if you ever feel like creating your own wrapper, don't position them with absolute, but with relative. Otherwise it won't work well on all viewports.
You mentioned that you are using bootstrap, in bootstrap the container class wraps your data into a wrapper that has a fixed width on each screen-device-width so you will need to add a container div for the header and the content without adding it inside the footer div.
If you are using bootstrap framework you will need to use these following classes for these div's as the following code:
<div class="site-container">
<div class="header">
<div class="container">
</div>
</div>
<div class="content">
<div class="container">
</div>
</div>
<div class="footer">
</div>
</div>
<style>
body{
background:url(../image.jpg);
}
header {
max-width:600px;
width:100%;
display:block;
background:#ccc;
height:250px; //header height no need to mention in your work
border:1px solid #000;
margin:auto;
}
#content {
max-width:600px;
width:100%;
display:block;
background:#ddd;
height:500px; //content height no need to mention in your work
border:1px solid #000;
margin:auto;
}
footer {
width:100%;
height: 300px;
left: 0;
background:#000;
}
</style>
<header>
<div class="container">
<div class="row">
<div class="col-lg-12">
// Header
</div>
</div>
</div>
</header>
<section id="content">
<div class="container">
<div class="row">
<div class="col-lg-12">
// Content
</div>
</div>
</div>
</section>
<footer>
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
// content here
</div>
</div>
</div>
</footer>
Demo: https://jsfiddle.net/q4Lcjmsy/3/
I wrote a website as shown here.
Code is:
<div id="mainDiv" class="container">
<div id="header">
<div class="plc">
<h1></h1>
<nav>
<div id="navPos">
<div style="position: relative;right: 113px;">Register</div>
<div style="position: absolute;right: 255px;top: 37px;">Login</div>
<div style="position: absolute;top: 38px;right: 123px;">Market</div>
</div>
</nav>
</div>
</div>
<div id="body" class="container-fluid">
<div id="container">
<div id="overlay"></div>
<div id="menu"></div>
<div id="formPos"></div>
<div id="or">OR</div>
<div id="fbReg">
<img src="images/fbOne.png" id="fbIcon">
<div id="fbPos">Register with Facebook</div>
</div>
<div id="gReg">
<img src="images/gPlus.jpg" id="gIcon">
<div id="gPos">Register with Google</div>
</div>
<div id="cliPos">
<img src="images/Bistip-in-media.png" id="imgCli">
</div>
</div>
</div>
<div id="footer">
hello
</div>
</div>
CSS can be found in that jsfiddle. The problem is: Only body is scrollable, but header and footer aren't scrollable. As a result, I can't see the footer. How can I fix it?
For best results, expand the output window of jsfiddle
Anytime you find no scroll, is because there is overflow:hidden; property, which should be removed or changed to 'auto'
In your Case:
1) Remove overflow:hidden; or overflow:auto;
2) If you do not want scroll in your content(i.e. portion excluding header & footer)
DEMO
CSS
html,body
{
overflow:auto; /* Or just REMOVE overflow*/
}
#body
{
overflow:auto; /* Or just REMOVE overflow*/]
}
I'm having a problem with layout structure.
Here is a mockup: http://i.imgur.com/JbboQ.jpg
And code:
<ul id="nav">
<li></li>
</ul>
<div id="home">
<div class="slider">
<div class="heading"></div>
<div class="slidebox"></div>
</div>
<div class="col1"></div>
<div class="col2"></div>
<div class="col3"></div>
</div>
I guess the easiest way would be to just add width style to each div but than I wouldn't be able to nest styles which is not an option.
Right now #home div has 980px width which is perfectly fine but the problem is that slider has 100% background and the parent div has 980px. Maybe it's too late but I just can't find proper and semantic solution for this.
I would be really glad if someone could help me out here,
Thanks.
There are a couple of things you can try:
Separate out your slider div so you can get 100% of your page width.
<div id="home">
...
</div>
<div class="slider">
<div class="heading"></div>
<div class="slidebox"></div>
</div>
<div id="columns">
<div class="col1"></div>
<div class="col2"></div>
<div class="col3"></div>
</div>
.slider { width: 100% }
Or you can set the z-index property of the slider div to a number higher than the index of the home so it renders on top.
<div id="home">
<div class="col1"></div>
<div class="col2"></div>
<div class="col3"></div>
</div>
<div class="slider">
<div class="heading"></div>
<div class="slidebox"></div>
</div>
.home { width: 980px; z-index: 1 }
.slider { width: 100%; position: relative; top:-50; z-index: 2 }
Note: You will have to adjust the positioning of the slider div.
I want to use sticky footer in this structure, can anyone write the code for me cause i have tried a lot of techniques but none of them are working perfectly for me.......
<body>
<div id="wrapper">
<div id="header">
<div id="logo"></div>
<div id="appoint">
<ul>
<li>info#company.com </li>
</ul>
</div><!--appoint div close-->
<div id="navi">
</div><!--navigation div close-->
</div><!--header div close-->
<div id="slidecontainer">
</div> <!--closing tag for container-->
<div id="feature">
<div id="featurewrap">
</div> <!--feature wrap close-->
</div> <!--feature div close-->
<div id="leftcol">
</div><!--leftcolumn div close-->
<div id="rightcol">
</div><!--right column div close-->
</div><!--wrapper div close-->
<div id="footer_wrap">
<div id="footer">
<div id="footerleft">
</div><!--footerleft div close-->
<div id="footerright">
</div><!--footerright div close-->
</div> <!--footer main div close-->
</div><!--footer div close-->
Also i am using full width repeating backgrounds for body and footer_wrapper that is the problem i am having........
OK, you need the following style :
<style type="text/css">
* {
margin: 0;
}
html, body {
height: 100%;
}
#wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -(<FOOTER_HEIGHT>+<FOOTER_TOP&BOTTOM_MARGIN>)px;
/* note the negative value */
}
#footer_wrap, .push {
height: <FOOTER_HEIGHT>px;
}
</style>
Note on #wrapper in bottom margin must have a negative value of the total of and bottom and top margins of footer if you have ...
On your code:
<div id="wrapper">
<!-- What ever code is here -->
<div class="push"></div><!-- this div MUST be last div before closing of "wrapper" -->
</div>
<div id="footer_wrap">
<!-- What ever code is here -->
</div>
Regards,