Hi I'm looking to create a 3 column responsive layout where one of the column (sidebar) is in fixed position.
Both sidebars have a width set in percents and also min & max-width properties in pixels.
And I want that the content in the middle to fill all the space between the two sidebars please.
I beleive I can calculate the width of the sidebars using JS but I'm looking for the best approach hopefully using only CSS please.
It needs to support only IE9 not below.
I'm attaching a drawing for better understanding and will appreciate your help.
Tried a JsFiddle. Please see if it's what are you looking for.
Here the html code:
<header>Fixed Header</header>
<div id='container'>
<nav>Navigation</nav>
<article>Article</article>
<footer>Footer</footer>
</div>
<aside>Fixed Aside</aside>
and here the css:
body
{
text-align:center;
padding:0;
margin:0;
}
header
{
height:50px;
background:rgb(200,200,0);
position:fixed;
top:0;
left:0;
width:100%;
}
aside
{
height:50px;
background:rgb(200,0,0);
position:fixed;
top:50px;
right:0;
width:20%;
height:700px;
}
#container
{
margin-top:50px;
}
nav
{
width:20%;
float:left;
height:700px;
background:rgb(200,100,100);
}
article
{
padding-right:20%;
}
footer
{
clear:both;
padding-right:20%;
width:80%;
background:gray;
height:50px;
}
You should try Bootstrap classes, they work perfectly
Related
I want to achieve some layout with percent setting of height on img element , it performed perfect while first loading, but I found that the img element couldn't spreading the parent element when browser resize.
The width of parent element will still be the former width and will not change after resizing.
How can I fix it without js and with pure css?
here are some example code:
html,body{
width:100%;
height:100%;
margin:0;
}
.container{
height:100%;
float:left;
background:yellow;
}
img{
height:30%;
width:auto;
}
<div class="container">
<img src="http://i.stack.imgur.com/EOYdZ.jpg">
</div>
Am not sure if i understood your question properly but created a codepen script. You can check it here. Added a "width:30%" property
html,body{
width:100%;
height:100%;
margin:0;
}
.container{
float:left;
background:yellow;
}
img{
width:30%;
height:30%;
}
I'm new to stackoverflow, and coding in general really, so I apologise in advance if its a really stupid question or I've missed something obvious.
I'm having an issue when I set a fixed position for a div, and combine it with auto width.
The CSS i'm using:
.headwrapper{
height:100px;
width:auto;
margin-left:90px;
margin-right:90px;
position:fixed;
min-width:1020px;
}
When don't include the position:fixed; it all works fine and the width is calculated automatically with 90px margins. However when I include the position:fixed; the auto width doesn't work and the width goes back to the minimum 1020px.
Is there anyway to fix this so the div can change width while fixed in position?
Thanks in advance,
Tom.
Fix your left and right due to you are using position:fixed.
Add this lines to your class:
left:0;
right:0;
Try this code wrapperDiv
<div class="wrapper">
<div class="headwrapper"></div>
</div>
.headwrapper {
height:100px;
width:100%;
background:yellow;
position:absolute;
left:90px;
right:90px;
}
.wrapper {
margin:0 auto;
width:100%;
height:100px;
background:red;
position:fixed;
}
I'm actually designing my website, it's going to be a one HTML page using javascript to switch between divisions.
I'm using a wrap division where my banner/header, text container and my footer are relative positioned.
I want my footer to be at least to the bottom of the window when there is not enough content, so I'm trying to put a min-height to my text container.
Like this the website would occupy at least all the windows in it's height.
My HTML code (a part ^^)
<div id="wrap">
<div id="banner"></div>
<div>
<div id="whoami" class="corpus"></div>
<div id="etc" class="corpus">There is different divisions like these, I'm switching through thoose using jQuery, but that's not important there. I'm trying to put a min-height to get the footer at the bottom of the windows if there not enough content. I can't pass the footer in absolute position</div>
</div>
<div id="footer"></div>
</div>
The CSS that goes with this
html, body {
margin:0;
padding:0;
background:#fff;
height:100%;
}
#wrap {
background-color:#ff0;
min-height:100%;
width:1000px;
left:50%;
margin-left:-500px;
position:absolute;
}
#banner {
background-color:blue;
height:150px;
width:1000px;
position:relative;
}
.corpus {
width:800px;
min-height:100%; //I tried this : min-height : calc(100% - 260px); it didn't work.
margin-left:100px;
background-color:grey;
position:relative;
height:auto;
margin-top:5px;
}
#footer {
height:100px;
width:1000px;
background-color:purple;
position:relative;
z-index:1;
bottom:0;
margin-top:5px;
}
A little Fiddle for the road :http://jsfiddle.net/yoshino78/bn455/1/
Since #wrap is a positioned element and you've already applied bottom:0 for the footer, all you've to do is
Simply apply position:absolute to the footer, so that it'll stay at the bottom of #wrap regardless of the content inside it.
Demo
Side note: you also might want to apply padding-bottom to #wrap equal to the height of footer so that content won't get hidden behind the footer
I have some trouble with my website.
I have a contact from which is based on 4 divs posisioned like this:
div 1 is the place where you can fill out your information
div 2 is the textarea for your message and a send button
div 3 is contact information
and div 4 are social media icons.
this all works great. on mobile they're are scaled beneath eachother and it works like a charm.
But now my designer want to add a format for landscape posioned mobiles (which I agree with him is nesacery because the contact page is way to long if you keep all the divs beneath eachother. so what he came up with is:
so div 1 and 2 beneath eachother with all the fill out fields. and on the right the information en social media icons.
but here starts my problem. because floating items will go beneath eachother in order. this means that div2 will stay beside div 2 and div 3 will be beneath div 1 like this (the arrow incades which 2 I want to swap:
is there any way to change this by just using css? the solution I came up with is writing a a new code posisioned in the good way for this problem and make it display none until the right landscape mode is registerd.. but this would be a bit of a heavy solution for such a problem in my opinion. so anyway has a better idea:
here a fiddle:http://jsfiddle.net/skunheal/p6Yy6/
#container{
height:200px;
width:400px;
background:#212121;
}
#id1{
height:90px;
width:190px;
background:#fff;
float: left;
}
#id2{
height:90px;
width:190px;
background:#fff;
float: left;
}
#id3{
height:90px;
width:190px;
background:#fff;
float: left;
}
#id4{
height:90px;
width:190px;
background:#fff;
float: left;
}
this is my css right now. in the jsfiddle is the position of every box displayed. aldo it doesnt matter if the boxes on the right are swapped.
Hope anyone can help me out!
If I understand corectly the "responsive" behavior you are looking for , you ca wrap the two first divs together and the two last ones together. and float the wraps to the left. Then using a percent width and max-width/min-width you can achieve the desired behaviour.
See this FIDDLE (I modified the width of #container in your fiddle so it is responsive)
HTML :
<div id="container">
<div id="left_wrap">
<div id="id1">left above</div>
<div id="id2">left under</div>
</div>
<div id="right_wrap">
<div id="id3">right above</div>
<div id="id4">right under</div>
</div>
</div>
CSS (modified)
#left_wrap,#right_wrap{
width:50%;
max-width:380px;
min-width:190px;
float:left;
}
#container {
height:100%;
width:100%;
background:#212121;
}
#id1,#id2,#id3,#id4 {
height:90px;
width:190px;
background:#fff;
float: left;
}
Now, if you change the width of the fiddle window, you will see that if the window width is over 760px the divs all align normaly. If the window is between 760px and 380px you get the disired behaviour. If th window is under 190px the divs all stand on to of each other.
Since you are working with fixed height/width on these, you should be able to use absolute positioning instead of floats.
#container{
height:200px;
width:400px;
background:#212121;
position:relative;
}
#id1{
height:90px;
width:190px;
background:#fff;
position:absolute;
top:0;
left:0;
}
#id2{
height:90px;
width:190px;
background:#fff;
position:absolute;
bottom:0;
left:0;
}
#id3{
height:90px;
width:190px;
background:#fff;
position:absolute;
top:0;
right:0;
}
#id4{
height:90px;
width:190px;
background:#fff;
position:absolute;
bottom:0;
right:0;
}
I'm sure this has been asked before but I couldn't find it.
Please see http://jsfiddle.net/Bw5j4/1/
I want to make #room div to fit 100% between #top and #commands even if there is no content in it.
And, if the content overlaps (as in current example) I want to fit it within borders of #room with scroll.
I need to keep #commands stuck to the bottom of page. I've tried height, max-height but it didn't work.
This should get you started to lock in the middle section
.room {
background-color:#fff;
border:1px solid #d8d8d8;
overflow:auto;
position:fixed;
top:80px;
bottom:150px;
left:0;
right:0;
}
You'll need to use JavaScript for this, unless the page is guaranteed to always be the same size and can't be resized. If that is the case, you can just explicitly set the height on .room. Otherwise:
function setRoomHeight() {
$(".room").height(
document.documentElement.clientHeight
- $(".top").height()
- $(".commands").height()
- 20);
}
$(setRoomHeight);
$(window).resize(setRoomHeight);
http://jsfiddle.net/gilly3/5TzFm/
(is jQuery ok, or would you prefer a non-jQuery example?)
This is what lazy* developers use tables for. It's very easy to get these fluid layouts like this. Without tables, it's more difficult.
I think perhaps this is something like what you want: http://jsfiddle.net/thomas4g/6u7ry/13/
<div id="wrapper">
<div id="top">Top Stuff</div>
<div id="content">
My Epic Content
</div>
<div id="bottom">Bottom Stuff</div>
</div>
#wrapper
{
height:700px;
background-color:teal;
position:relative;
padding-top:50px;
padding-bottom:50px;
}
#content {
height:700px;
background-color:red;
overflow:auto;
}
#top {
position:absolute;
top:0;
left:0;
height:50px;
width:100%;
background-color:yellow;
}
#bottom {
position:absolute;
bottom:0;
left:0;
height:50px;
width:100%;
background-color:yellow;
}
*granted, just because you use tables doesn't mean you're lazy. It's just often true. No offense intended.