I am trying to create a fluid page layout with a fixed header. But I am having issues with making the fixed header fluid.
Here is the code:
.container {
max-width: 68.5em;
margin: 0px auto;
border: 1px solid #000;
height: 1000px
}
header {
position: fixed;
top: 0;
border: 1px solid red;
height: 55px;
width: 100%;
}
<section class="container">
<header>
</header>
</section>
Js Fiddle Link: http://jsfiddle.net/s2myn87q/4/
Since most browsers use the following style in their default stylesheet:
body {
margin: 8px;
}
You can use
header {
left: 8px;
right: 8px;
width: auto; /* default value */
}
body {
margin: 8px;
}
.container {
max-width: 68.5em;
margin: 0px auto;
border: 1px solid #000;
height: 1000px
}
header {
position: fixed;
left: 8px;
right: 8px;
top: 0;
border: 1px solid red;
height: 55px;
}
<section class="container">
<header>
</header>
</section>
Related
I want to make a website with div one below the another .How do i set the height of the responsive page .There is no content inside div .I want to make solid border rectangle .This is for practise purpose.
html,
body {
width: 100%;
min-height: 100%;
margin: 0px;
padding: 0px;
-webkit-text-size-adjust: none;
font-size: 62.5%;
background: #906aaf
}
.header {
width: 100%;
height: 10%;
background-color: #7e599e;
position: fixed;
z-index: 1;
top: 0
}
.one {
width: 50%;
height: 30%;
border: 10px solid black;
margin-left: auto;
margin-right: auto;
height: auto;
width: auto;
}
.two {
width: 50%;
height: 30%;
border: 10px solid black;
}
.three {
width: 50%;
height: 30%;
border: 10px solid black;
}
.four {
width: 50%;
height: 30%;
border: 10px solid black;
}
.five {
width: 50%;
height: 30%;
border: 10px solid black;
}
<div class="header"></div>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>
<div class="five"></div>
If I understand your question correctly and you want to position the first div in the html to show on the web page AFTER those that come next in the html -
You can use css3 flexbox. Apply the display:flex on the body and then use order on the body's children to order them.
So in your example, add this to your css -
body {
display: flex;
flex-direction: column; //(Flexbox defaults to row, apply this to change back to column)
}
.one {
order: 5;
}
.two {
order: 1;
} ...
Have a look at this for more info.
use pixel instead of %
html,
body {
width: 100%;
min-height:800px;
margin: 0px;
padding: 0px;
-webkit-text-size-adjust: none;
font-size: 62.5%;
background: #906aaf
}
.header {
width: 100%;
height: 80px;
background-color: #7e599e;
position: fixed;
z-index: 1;
top: 0
}
.one {
width: 50%;
height: 240px;
border: 10px solid black;
margin-left: auto;
margin-right: auto;
height: auto;
width: auto;
}
.two {
width: 50%;
height: 240px;
border: 10px solid black;
}
.three {
width: 50%;
height: 240px;
border: 10px solid black;
}
.four {
width: 50%;
height: 240px;
border: 10px solid black;
}
.five {
width: 50%;
height: 240px;
border: 10px solid black;
}
<div class="header"></div>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>
<div class="five"></div>
I want to achieve something like this:
However im confuse how to create the triangle shaped but in dynamic size as the right side area is a paragraph that could have alot or small content.
I just can't get the structure worked out at the moment
So if you want a triangle shape there, then you can definitely use CSS to make a triangle for that section. Here's a quick demo that float's two div's and uses a CSS triangle.
Triangle CSS:
width: 0px;
height: 0px;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-left: 10px solid #fff;
All together:
* {
box-sizing: border-box;
}
body {
background: #ccc;
margin: 0;
padding: 0;
}
p {
margin: 0;
text-align: center;
position: relative;
top: 50%;
transform: translateY(-50%);
}
.wrap {
margin: 50px auto;
width: 500px;
}
.inner {
position: relative;
height: 100px;
width: 100%;
}
.left {
float: left;
background: #fff;
height: 100px;
position: relative;
width: 30%;
}
.right {
float: left;
background: #4c4c4c;
height: 100px;
padding: 0 40px;
width: 70%;
}
.border {
border: 1px solid yellow;
border-style: dashed;
position: absolute;
top: 0;
left: 0;
width: 96%;
height: 80px;
top: 50%;
transform: translateY(-50%);
right: 0;
margin: 0 auto;
}
.arrow-left {
width: 0px;
height: 0px;
position: absolute;
top: 0;
right: -10px;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-left: 10px solid #fff;
}
<div class='wrap'>
<div class='inner'>
<div class='left'>
<p>Lorem Ipsum <br>Lorem ipsum dolor</p>
<div class='arrow-left'></div>
</div>
<div class='right'><p>Lorem Ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</p></div>
<div class='border'></div>
</div>
</div>
JSFiddle: http://jsfiddle.net/8ogzcLhy/2/
Note: this layout uses floats which can ditched to use flex-box which has all kinds of great features to utilize to make cleaner layouts.
I have 4 divs, outer, inner, title, and content. I want to place inner div inside the outer, and title and content - inside the inner div, one on top of the other. I positioned outer and inner divs relative and the other 2 - absolute.
inner div fits right inside thew outer, but title and content overflow the inner div.
How can I fix my CSS here?
#outer {
width: 90%;
margin: 20px auto;
border: 2px solid red;
height: 500px;
position: relative;
}
#inner {
width: 100%;
border: 1px solid green;
height: 300px;
position: relative;
}
#inner .title {
width: 100%;
height: 63px;
padding-left: 1%;
padding-top: 5px;
border-radius: 2px;
float: left;
border: 1px solid blue;
background-color: lightblue;
position: absolute;
top: 0;
}
#inner .content {
padding: 2em 2em;
width: 100%;
height: 100%;
margin: 0 auto;
background: #FFF;
height: auto;
display: block;
float: left;
border: 2px solid orange;
position: absolute;
top: 20%;
}
<div id="outer">
<div id="inner">
<div class="title"></div>
<div class="content"></div>
</div>
</div>
#outer {
width: 90%;
margin: 20px auto;
border: 2px solid red;
height: 500px;
position: relative;
}
#inner {
max-width: 100%;
border: 1px solid green;
height: 300px;
position: relative;
padding: 0 5px;
}
#inner .title {
width: 100%;
height: 63px;
padding-top: 5px;
border-radius: 2px;
border: 1px solid blue;
background-color: lightblue;
}
#inner .content {
width: 100%;
height: 63px;
background: #FFF;
display: block;
border: 1px solid orange;
}
<div id="outer">
<div id="inner">
<div class="title"></div>
<div class="content"></div>
</div>
</div>
to prevent the title and content from overflow each other just assign a relative position to them and assign the absolute position to its parent . just like that
#outer {
width: 90%;
margin: 20px auto;
border: 2px solid red;
height: 500px;
position: relative;
}
#inner {
width: 90%;
border: 1px solid green;
height: 300px;
position: absolute;
}
#inner .title {
width: 100%;
height: 63px;
padding-left: 1%;
padding-top: 5px;
border-radius: 2px;
float: left;
border: 1px solid blue;
background-color: lightblue;
position: relative;
top: 0;
}
#inner .content {
padding: 2em 2em;
width: 100%;
height: 100%;
margin: 0 auto;
background: #FFF;
height: auto;
display: block;
float: left;
border: 2px solid orange;
position: relative;
top: 20%;
}
<div id="outer">
<div id="inner">
<div class="title"></div>
<div class="content"></div>
</div>
</div>
I've been battling with this problem for a while and I'd like to ask advice if any of you can help.
I'm making a simple layout where I have a 120px high header and a content div under it. I'd like to stretch the content to the bottom of the page, but when I set the height to 100% it stretches over the page.
I have tried googling this plenty of times but none of the answers I've found help me or are too complex to understand.
My CSS is as follows:
* {
-ms-box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html {
height: 100%;
border: 5px solid red;
margin-bottom: -16px;
}
body {
background-color: lightblue;
height: 100%;
border: 5px solid blue;
margin: 0 0 -16px 0;
}
.wrapper {
display: block;
position: relative;
background-color: green;
width: 605px;
margin: auto;
height: 100%
}
.header {
display: inline-block;
background-color: blue;
height: 120px;
width: 450px;
text-align: center;
padding: 5px 0px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.content {
display: inline-block;
background-color: red;
padding: 10px 5px;
width: 450px;
height: 100%;
I've set borders to html and body just to see that I can stretch them properly, so please ignore those.
You can position the header absolute within the content div and set the top padding on the content div to the same height as the header.
JSFiddle
HTML
<div class="wrapper">
<div class="content">
<div class="header"></div>
</div>
</div>
CSS
.header {
position:absolute;
top:0;
left:0;
background-color: blue;
height: 120px;
width: 450px;
text-align: center;
padding: 5px 0px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.content {
display: inline-block;
background-color: red;
padding: 10px 5px;
width: 450px;
height: 100%;
padding-top:120px;
}
Set max-height: 100%; instead of height: 100%; which will not over-height the header height as it is defined height: 120px;
I need help to fix the next layout, because:
It doesnt look right for IE
The footer doesnt stay at bottom when #columns content grows up
I need to make the #column container 100% min-height with small content
Thanks in advance!
This is my code:
<style>
* {
margin: 0;
padding: 0;
}
body, html {
background: silver;
height: 100%;
}
#header {
min-width: 1000px;
width: 100%;
height: 40px;
background: red;
}
#columns {
width: 1000px;
background: white;
margin: 0 auto;
padding-bottom: 40px;
border: 1px solid black;
}
#footer {
position: absolute;
bottom: 0;
min-width: 1000px;
width: 100%;
height: 40px;
background: black;
}
<body>
<div id="header"></div>
<div id="columns"></div>
<div id="footer"></div>
</body>
Try this (edited) :
JSFiddle: http://jsfiddle.net/NeCc3/14/
* {
margin: 0;
padding: 0;
}
body, html {
background: silver;
height:100%
}
#header {
width: 100%;
height: 40px;
background: red;
}
#columns{
min-height:100%;
width: 1000px;
background: white;
margin: 0 auto;
padding-bottom: 40px;
border: 1px solid black;
}
#footer {
width: 100%;
height: 40px;
background: black;
}