This is my layout - I use this for 2 pages.
I need to be full height (100%) and flexible height in same time.
Red block is empty, only a title/subtitle and full bg (cover) image.
In right side I have small text for first page, and a lot of text for 2nd page, this is why I need to be fluid.
I tryied more methods but I can't make it work.. and I don't want to use js - only pure css2.
Can someone help me? thanks.
One possibility to achieve what you want would be to use display:table & display:table-cell:
#content {
width: 100%;
display: table;
}
#left, #right {
width: 50%;
display: table-cell;
}
DEMO
You could also work with flex-box.
Flexbox guide
It will work if you want change the height of .top and .bottom remember that change the value of var heighs this is (.bottom .top) height
Java script (jquery)
<script type="text/javascript" src="http://www.designerbh.com/index_files/jquery-1.9.1.min.js"></script>
<script>
setInterval(function(){
var heights=$("body").height();
var heights=heights-100;
console.log(heights);
$(".red ,.gray").css({'height':heights});
},100);
</script>
Html
<body style='margin:0px'>
<div class='top'>
</div>
<div class='red'>
</div>
<div class='gray'>
</div>
<div class='bottom'>
</div>
</body>
Css
<style>
.top{
float:left;
width:100%;
height:50px;
background:black;
color:white;
}
.red{
float:left;
width:50%;
height:100%;
background:red;
}
.gray{
float:left;
width:50%;
height:100%;
background:#ccc;
}
.bottom{
float:left;
width:100%;
height:50px;
background:black;
color:white;
}
</style>
I just recommend you using Bootstrap and you dont need to be worried about - Check out their griding getbootstrap.com
Related
I have a big div wrapper called <div class="pageWrapper"> for which its size is set to be 1000px.
Inside it I have a header that I want to be 100% of the screen and fixed.
How can I do it ?
I know that I could take off the header div outside the pagewrapper but I'm customizing a volusion template so to take it off would delete all the CSS that was originally set up.
Try the following and see if it works.
Here is Fiddle as created by François Wahl
width:100%;
position:fixed;
And it is always good if you post the code you have tried first.
Do you want something like Demo ?
HTML
<div class="pageWrapper">
<div class="header">Header</div>
</div>
CSS
body {
margin: 0;
}
.pageWrapper {
width:500px;
background:green;
height:500px;
margin:0 auto;
}
.header {
position:fixed;
width:100%;
top:0;
left:0;
right:0;
height:50px;
background: red;
}
There's some questions about this but I haven't found a good answer. Been looking for a couple hours now.
Here's my jsfiddle:
http://jsfiddle.net/foreyez/Mr2ER/
I have some simple markup:
<div class='container'>
<div class='box1'></div>
<div class='box2'></div>
<div class='box3'></div>
</div>
and CSS:
.container {
white-space:nowrap;
}
.box1 {
width:200px;
height:200px;
background:red;
float:left;
}
.box2 {
width:200px;
height:200px;
background:green;
float:left;
}
.box3 {
width:200px;
height:200px;
background:blue;
float:left;
}
Yet the boxes still wrap when the window is small enough. Any suggestions?
Note: I want to keep this float:left, so no inline-block solutions please.
If you add width:600px; to the .container it will force them to stay inline.
Here's your updated JSFiddle
Give #container a width at least as large as the child divs:
.container {
white-space:nowrap;
width:9999px;
}
jsFiddle example
Please can you check this example website. if I read the code well (just had a sight) it's setup with tables with some javascript so that a centered container can always stay at the center, and that the body has got two fluid color backgrounds which expands according to the screen size.
I was attempting to reproduce something like this but just using css, I am quite sure I could but can't figure how. please could you give me some indication/document to read.
i have designed a simple structure here in Jsfiddle,have a look
MARK-UP::
<div class="wrapper">
<div class="head_wrapper">
<div class="left_head">left</div>
<div class="right_head">right</div>
</div>
<div class="body_wrapper">
<div class="left_body">left</div>
<div class="right_body">right</div>
</div>
</div>
CSS ::
.wrapper{
overflow:hidden;
width:100%;
display:table;
}
.head_wrapper,.body_wrapper{
overflow:hidden;
width:100%;
padding:0px;
display:table-row;
}
.left_head,.left_body,.right_head,.right_body{
display:table-cell;
text-align:center;
vertical-align:middle;
}
.left_head{
background:black;
height:300px;
font-size:36px;
color:white;
}
.right_head{
background:blue;
height:300px;
font-size:36px;
}
.left_body{
background:yellow;
height:800px;
font-size:36px;
}
.right_body{
background:green;
height:800px;
font-size:36px;
}
.left_head,.left_body{
width:70%;
overflow:hidden;
}
You're just asking for horizontal centering, on a fixed-width container. This is easily done entirely in CSS. Simply set for your container (the element that wraps around your entire site):
.container {
width: 800px;
margin: 0 auto;
}
The "auto" will automatically even out the left and right margins (with no margin on top and bottom.)
[Edit: oops forgot a bit]
As for the blocks of colour, you can achieve this with a background image on your element, that's 1px wide and however tall you need. Just set it to repeat-x.
If your two sections have the possibility of having different heights, you can break it up, so that:
One container is full-width, and has the background colour. An inner container will then be fixed-width with auto margins as above;
Another container is full-width, and has the lighter background colour. An inner container will then be fixed-width with auto margins as above.
This means your code will be something like:
<div class="headercontainer">
<div class="header> This is my header </div>
</div>
<div class="maincontainer">
<div class="main"> This is rest of my copy. </div>
</div>
And your CSS:
.headercontainer { background-color: #222; }
.maincontainer { background-color: #444; }
.headercontainer .header,
.maincontainer .main { width: 800px;
margin: 0 auto; }
HTH :)
I have a div containing a span and I want the span to vertically and horizontally align to the center of my div.
Here's the fiddle : http://jsfiddle.net/RhNc2/1/
I've try margin:auto on the span and the vertical-align on the div, but it's not working
EDIT : My div and my span don't have a fixed height, it depends of the content, i've put it fixed on the fiddle just to show you
Add this to the div CSS:
display:table-cell; text-align:center
working fiddle is here: http://jsfiddle.net/sdoking/DCT85/
CSS:
#myDiv {
border:1px solid black;
height:50px;
width:200px;
vertical-align:middle;
display:table-cell;
text-align:center
}
#mySpan {
width:100%;
border:thin blue solid
}
Borders are for clarity :)
Vertical alignment is a tricky business, and I don't know if there's one tried-and-true way. The most reliable technique available in the last couple of years is to use a CSS table layout. The only downside to this approach is that it may not work on outdated browsers. Still, in my experience this is probably the best overall solution. See my example below:
<style type="text/css">
#container {
display:table;
border-collapse:collapse;
height:200px;
width:100%;
border:1px solid #000;
}
#layout {
display:table-row;
}
#content {
display:table-cell;
text-align:center;
vertical-align:middle;
}
</style>
<div id="container">
<div id="layout">
<div id="content">
Hello world!
</div>
</div>
</div>
Here's a jsFiddle: http://jsfiddle.net/aGKfd/2/
There's another technique, but it's not as foolproof as the above technique. It involves two containers, with the outer container's position set to relative and the inner set to absolute. Using absolute positioning on the inner container you can get close, but it requires some tweaking to get it just right:
<style type="text/css">
#vertical{
position:absolute;
top:50%;
left:0;
width:100%;
text-align:center;
}
#container {
position:relative;
height:200px;
border:1px solid #000;
}
</style>
<div id="container">
<div id="vertical">
Hello world!
</div>
</div>
Here's a jsFiddle: http://jsfiddle.net/6SWPe/
use line-height = height:
http://jsfiddle.net/RhNc2/8/
You can also just apply these styles to the containing <div>. The line-height solution assumes you only need one line of text to be centered though.
#myDiv{
border:1px solid black;
height:50px;
width:200px;
text-align:center;
line-height:50px;
}
Here it is
#myDiv{
border:1px solid black;
height:50px;
width:200px;
}
#mySpan{
display:block;
text-align:center;
line-height:50px;
}
And the jsFiddle: http://jsfiddle.net/Simo990/RhNc2/9/
Edit: since your div and span height depends of the content, my solution will not work, because it needs fixed height and only one row of text. Just look for a solution with position:absolute.
<style>
div{
height:100px;
}
#wrapper{
position:relative;
}
#navigation {
position:relative;
width:400px;
background-color:black;
float:left;
}
#content{
width:2300px;
background-color:red;
padding-left:500px;
}
#iframe{
background-color:green;
}
</style>
<div id="wrapper">
<div id="navigation">
sss
</div>
<div id="content">
<div id="iframe">
content
</div>
</div>
</div>
In browsers like IE8,FF #content div is coming inline with navigation in IE 7 content div is coming down.
I am looking for solution of this issue ine ie7 Thanks for all your help
had similar problem. got solved the issue thanks to user VinayC. I'm sure this will help u too. solution is relative positioning. check this link: http://snook.ca/archives/html_and_css/position_relative_overflow_ie/
In IE the #content is coming down because the width of that element is greater than the window/body. But I'm not sure if this is same with IE9.
To solve this add a width to the #wrapper that is greater than the width of #navigaton + #content.
#wrapper{
position:relative;
width: 2800;
}
Also why do you have such a long width and padding for the #content?