I am trying to make my app responsive, but I have a problem because Footer is not responsive.
I read this link but this didn't worked for me.
<body>
<div id="wrap">
<div id="top">
#include('includes.top')
</div>
<div id="left">
#include('includes.left')
</div>
<div id="content">
#yield('content')
</div>
<div id="right">
</div>
<div id="footer">
#include('includes.footer')
</div>
</div>
</body>
styles.css
html,
body { height: 100%; }
body {
display: table;
width: 100%;
}
#footer {
display: table-row;
height: 1px;
}
#content { height: 100%; }
The code in the link you posted (in the comments) does not implement it the way you do ..
Your html should be (according to that article)
<body>
<div id="wrap">
<div id="top">
#include('includes.top')
</div>
<div id="left">
#include('includes.left')
</div>
<div id="content">
#yield('content')
</div>
<div id="right">
</div>
</div>
<div id="footer">
#include('includes.footer')
</div>
</body>
and your css
html,
body { height: 100%; }
body {
display: table;
width: 100%;
}
#footer {
display: table-row;
height: 1px;
}
#wrap{ display: table-row; height: 100%; }
And a demo of this code at http://jsfiddle.net/LFeYA/
Related
I'm trying to figure out how to create a fluid layout with a fixed width sidebar and fluid content area using Jeet.
HTML:
<div class="wrapper">
<div class="sidebar"></div>
<div class="content"></div>
</div>
CSS:
.wrapper {
width: 100%;
}
.sidebar {
width: 240px;
}
Looks like it is not possible with Jeet to set the content css to take rest of the layout, is it so?
You have to use define content width
HTML CODE
<div class="wrapper">
<div class="sidebar">
<div class="content-box">
Content Here !!!!
</div>
</div>
<div class="content">
<div class="content-box">
Content Here !!!!
</div>
</div>
</div>
CSS CODE
.wrapper {
color: #fff;
}
.sidebar {
width:30%;
display:inline-block;
float: right;
background: #333;
}
.content {
width: 70%;
display: inline-block;
background: #666;
}
.content-box {
padding: 20px;
}
Please check Demo Here https://jsfiddle.net/568447zu/
Here's a backwards one.. IE Working while chrome does not!
I'm getting strange extra vertical spaces between divs in chrome. IE the divs sit flush against each other as intended.
I originally had a min-height attribute which caused some errors with width, but took that out. Still not entirely sure what's causing the spacing issue.
Any help is appreciated! Thanks all, -BR
CSS
#container {
width: 100%;
}
#headerout {
width: 100%;
height: 100px;
background: #1240AB;
}
#header {
width: 1000px;
margin: auto;
}
.splitout {
width: 100%;
height: 225px;
}
.split {
width: 1000px;
margin: auto;
}
.content {
width: 750px;
margin: auto;
}
.white {background-color: #DDE3F0;}
.lightblue {background-color: #C9D5F0;}
#footerout {
width: 100%;
height: 30px;
background: #1240AB;
}
#footer {
width: 1000px;
margin-left: 25px;
}
Markup
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset='utf-8'>
</head>
<body>
<div id="container">
<header>
<div id="headerout">
<div id="header">
<p>Content<p>
</div>
</div>
</header>
<div class="splitout white">
<div class="split">
<div class="content">
<p>content</p>
</div>
</div>
</div>
<div class="splitout lightblue">
<div class="split">
<div class="content">
<p>content</p>
</div>
</div>
</div>
<div class="splitout white">
<div class="split">
<div class="content">
<p>content</p>
</div>
</div>
</div>
</div>
<div id="footerout">
<div id="footer">
<p>foot</p>
</div>
</div>
</body>
</html>
Don't use css-reset.
Prefer normalize.css: http://necolas.github.io/normalize.css/
"reasons":
https://stackoverflow.com/a/8357635/1518921
this help with "bugs".
You need to use css-reset for paragraph's margins (they causing this)
http://jsfiddle.net/eUVm8/
Simple example of reset
* {
margin: 0;
padding: 0;
}
Chrome add's margins for paragraphs by default.
I would like to put the footer at the bottom of the browser window and fill the empty part with the container when necessary(. This is my structure:
<header>
<div class='container'>
....
</div>
</header>
<div id='wrap'>
<div class='container'>
<div class='white-background'>
<div class='col-xs-12 col-sm-5 leftcontent'>[%leftcontent%]</div>
<div class='col-xs-12 col-sm-7 maincontent'>[%maincontent%]</div>
</div>
</div>
</div>
<footer>
<div class='container'>
<div style='text-align: center; padding-bottom: 20px;'><h3>[%copyright%]</h3></div>
</div>
</footer>
And this is the css:
#wrap {
min-height: 100%;
background-image:url('bk.gif');
background-color: #2c3e50;
}
.white-background{
width:100%;
height:100%;
display:block;
overflow:auto;
background-color: #fff!important;
}
footer{
background-color: #f2f2f2;
text-align:center;
position: relative;
margin-top: -50px;
height: 50px;
clear:both;
padding-top:20px;
}
I have done some tries and took a look to other answers, but without success...
Try add first stycky footer solution
http://ryanfait.com/html5-sticky-footer/
Logo image is floating about 20% to the left. Where did i go wrong?
<div class="container">
<div class="header" id="hd">
<header>
<div class="row">
<div class="span12 pagination-centered">
<img src="http://www.blabla.com/wp-content/themes/lawyer/images/logo.png"></div>
</div>
.container {width: 100%;}
#hd {
background-color: #405160;
}
#lg {
margin: 0 auto;
position: relative;
}
Just made all the rows fluid, and it aligned perfectly
try below code with attached css classes.
.row:before, .row:after {
content: "";
display: table;
line-height: 0;
}
.row:after {
clear: both;
}
.logo {
padding-top: 10px;
}
<div class="row">
<div class="logo">
<img src="<?php echo get_template_directory_uri(); ?>/images/logo.png" alt="">
</div>
</div>
Thanks.
I am trying to create a header with 3 divs: one is aligned left, one is aligned right and the other is in the center.
the page is for example 1200px
the black,red and yellow rectangles are 960px and centered in the page.
elements in the black rectangle are added to the left,
elements in the yellwo rectangle are added to the right,
and the elements in the red tectangle are centered.
This is a good general case study for header of a site
This will solve your issue
<div class="header" style="width:1200px;">
<div style="width:40%;float:left;" class='black-one'>
<div style='float:left;'>Some content</div>
<div style="clear:both"></div>
</div>
<div style="width:20%;float:left;" class='red-one'>
<div style="margin:10px auto;text-align:center">Some content</div>
<div style="clear:both"></div>
</div>
<div style="width:40%;float:left;" class='yellow-one'>
<div style='float:right;text-align:right;'>Some content</div>
<div style="clear:both"></div>
</div>
<div style="clear:both"></div>
</div>
I wrote an article on this a while back here is my code...
<div id="mainContent">
<div id="col1">
Column 1
</div>
<div id="col2">
Column 2
</div>
<div id="col3">
Column 3
</div>
<div id="clearance" style="clear:both;"></div>
</div>
And here is the CSS for it....
#mainContent {
width: 1000px;
margin-right: auto;
margin-left: auto;
text-align: center;
}
#col1 {
margin: 10px;
float: left;
width: 300px;
}
#col2 {
margin: 10px;
float: left;
width: 300px;
}
#col3 {
margin: 10px;
float: left;
width: 300px;
}
Hope this helps... Phillip Dews
Try this..
<style>
.header { margin: 0px auto; width: 1200px; }
.floatt { float: left; margin-right: 5px;}
.black-one { width: 40%;}
.red-one { width: 20%;}
.yellow-one { width: 40%;}
.clear { clear: both;}
</style>
<div class="header">
<div class='black-one floatt'>
Some content
</div>
<div class='red-one floatt'>
Some content
</div>
<div class='yellow-one floatt'>
Some content
</div>
<div class="clear"></div>
</div>