html
<div id="wrap">
<div id="header">
header
</div>
<div id="content">
content
</div>
<div id="sidebar">
in here will be login module
</div>
</div>
<div id="footer">
asdfasdf
</div>
css
#wrap{
width:100%;
margin:0 auto;
}
#header{
width:100%;
height:50px;
background:orange;
}
#content{
width:100%;
height:500px;
background:green;
float:;
}
#sidebar{
width:25%;
height:550px;
background:red;
float:left;
position:relative;
bottom:550px;
left:20px;
}
#footer{
float:left;
position:ralative;
}
I want the footer div starting from the left side(same as content and header div), but it starts with a weird point.
this is the demo
http://jsfiddle.net/64Uq5/3/
and, can somebody link me on good tutorial understanding position and float?
i think this is the reason, why this messed up, but can't understand what it means, for a newbie front-end designing.
Add left:0px; in your sidebar id #sidebar
#sidebar {
width: 25%;
height: 550px;
background: red;
float: left;
position: relative;
bottom: 550px;
left: 0;
}
HTML
<div style="clear:both"></div> //include this division before footer division
<div id="footer">
asdfasdf
</div>
css
#footer{
position:ralative;
float : left;
margin-top : -550px;
}
check this fiddle
http://jsfiddle.net/ankurdhanuka/Lgyku/
Related
I have problem with fixed element, I wan't to set her width 100% relative to the second parent div .container
http://jsfiddle.net/q7wcam7x/2/
HTML
<div class="container">
<div class="header">
<div class="fixed">
!
</div>
</div>
</div>
CSS
.container{
width:300px;
position:relative;
margin:auto;
}
.header{
position:relative;
border:1px solid red;
height:300px;
}
.fixed{
position:fixed;
width:inherit;
height:10px;
background-color:blue;
}
This isn't possible with position:fixed, because fixed positioning is relative to the viewport (or the "screen").
However, this could be done with position:absolute, which causes the element to position itself relative to the closest parent that has the position property set on it:
http://jsfiddle.net/q7wcam7x/6/
HTML:
<div class="container">
<div class="header">
<div class="fixed">
dasdasdasdadddddddds
dsa
asdd
asd
</div>
</div>
</div>
CSS:
.container{
width:300px;
position:relative;
margin:auto;
}
.header{
border:1px solid red;
height:300px;
}
.fixed{
position:absolute;
width:100%;
height:10px;
background-color:blue;
}
If the above is not what you're looking for, maybe this will help you find a solution to your problem:
http://jsfiddle.net/q7wcam7x/7/
HTML:
<div class="container">
<div class="stickyHeader">THIS IS A HEADER</div>
<div class="scrollableContent">SCROLLABLE CONTENT
<br/>SCROLLABLE CONTENT
<br/>SCROLLABLE CONTENT
<br/>SCROLLABLE CONTENT
<br/>SCROLLABLE CONTENT
<br/>SCROLLABLE CONTENT
<br/>SCROLLABLE CONTENT
<br/>SCROLLABLE CONTENT
<br/>SCROLLABLE CONTENT
<br/>SCROLLABLE CONTENT
<br/>SCROLLABLE CONTENT
<br/>SCROLLABLE CONTENT
<br/>
</div>
</div>
CSS:
.container {
width: 200px;
height: 150px;
overflow:hidden;
border: gold solid 2px;
}
.stickyHeader {
height: 20px;
background: white;
}
.scrollableContent {
height: 130px;
overflow: auto;
}
try this:
.fixed{
position:fixed;
left: 0;
right: 0
width:inherit;
height:10px;
background-color:blue;
}
I have this sample
link
CODE HTML:
<div class="banner">
</div>
<div class="inner">
<div class="left"></div>
<div class="main"></div>
<div class="right"></div>
</div>
CODE CSS:
.left,.main,.right{
float:left;
width:200px;
height:100px;
}
.left{
background:red;
}
.main{
background:blue;
}
.right{
background:aqua;
}
.banner{width:300px;background:yellow;height:100px;}
I want to move div on the right (.right) to be in line with div website (banner) without changing HTML code (just CSS).
I tried to add margin-top:-6em look different on other resolutions.
Can you help me to solve this problem?
Thanks in advance!
If you can only change the CSS, you have to use margin-top:-100px instead of margin-top:-6em if you want to align it. https://jsfiddle.net/ck3pux8x/1/
But the best solution would be changing the HTML to move the .right div outside the .inner an place it next to the .banner and make .banner float right. https://jsfiddle.net/ck3pux8x/2/
HI now try to this define your body position relative and your class .right position absolute and left or top according to your requirement .
as like this
body{
position:relative;
}
.right {
background: aqua;
position: absolute;
left: 400px;
top: 0;
}
Demo
.right{
position:absolute;
left:400px;
top:0;
}
body{position : relative;}
.left,.main,.right{
float:left;
width:200px;
height:100px;
}
.left{
background:red;
}
.main{
background:blue;
}
.right{
background:aqua;
}
.banner{width:300px;background:yellow;height:100px;}
<div class="banner">
</div>
<div class="inner">
<div class="left"></div>
<div class="main"></div>
<div class="right"></div>
</div>
You can use relative re-positioning in this case:
.right{
background:aqua;
position: relative;
top: -100px;
}
https://jsfiddle.net/ck3pux8x/4/
Imagine a page with the basic structure as below. The main question is how do I get the .left background to extend all the way to the left side of the window, and the .right to extend to the right side? Both need to remain fixed width.
HTML:
<body>
<div class="container">
<header>blah</header>
<article>doodle doo</article>
<div class="left">Left stuff with blue background</div>
<div class="right">Right stuff with red background</div>
<div class="clear"></div>
</div>
<footer>deedle dee</footer>
</body>
CSS:
.container{
width:400px;
margin:0 auto;
}
header{
background-color:grey;
}
.left{
width:200px;
float:left;
background-color:blue;
}
.right{
width:200px;
float:right;
background-color:red;
}
.clear{
clear:both;
}
footer{
background-color:#DDD;
text-align:center;
}
Fiddle here
The basic idea is the same as this page, but you might notice that the page scrolls a loooong way to the right - the cut off doesn't actually work.
I have achieved this with display: table and pseudo elements.
The basics of this solution:
The wrapper .content is made display: table and given position: fixed to allow its "cells" to have your fixed width. Provide spacing ,if required, with border-spacing: unit size;
.left and .right are given display: table-cell
.content:before and .content:after provide pseudo columns (also with display: table-cell) to space out the background.
Have an example!
HTML
<header></header>
<article></article>
<div class="content">
<div class="column left"></div>
<div class="column right"></div>
</div>
<footer></footer>
CSS
* {
margin:0;
padding:0
}
html,body {
height:100%
}
.content {
display:table;
table-layout:fixed;
height:100%;
width:100%
}
header {
background-color:grey;
height:20px;
width:500px;
margin:0 auto
}
article {
height:20px;
width:500px;
margin:0 auto
}
.column {
display:table-cell;
width:200px;
vertical-align: top
}
.left {
height:100%;
background:blue
}
.content:before,.content:after {
display:table-cell;
content:'';
background:blue;
height:100%;
vertical-align: top;
padding-left:10%
}
.content:after {
background:red;
padding-right:10%
}
.right {
background-color:red
}
footer {
background-color:#DDD;
text-align:center;
height:50px
}
1) Put your left and right elements into another container:
<div class="container">
<header>blah</header>
<article>doodle doo</article>
</div>
<div class="container2">
<div class="left">
<div class="text">Left stuff with blue background</div>
<div class="clear"></div>
</div>
<div class="right">
<div class="text">Right stuff with red background</div>
<div class="clear"></div>
</div>
</div>
<footer>deedle dee</footer>
2) The container2 width is 100%, let the left and right to be 50%:
.left {
width:50%;
float:left;
background-color:blue;
}
.right {
width:50%;
float:right;
background-color:red;
}
3) The text element on your both columns, should be 200px:
.text {
width: 200px;
}
.left .text {
float: right;
}
.right .text {
float: left;
}
Working jsFiddle Demo.
I can't get the footer to stick at the bottom of the page. If there is less content, i need it to be displayed without any scroll of course and if there is more content then in the end. I have the following code:
<div id='wrapper'>
<div id="top_bar">
</div>
<div id="top_add">
<div if="left_logo">LOGO</div>
<div id="top_add">ADD</div>
</div>
<div id="content" style="height:auto;width:100%;">
<div style="font-size:25px;width:90%;float:left;height:auto;">ABCD
</div>
<div style="width:10%;height:auto;float:right;">ADV.
</div>
</div>
</div>
<div id="foot">
Contact Us
</div>
CSS:
html, body {
height:100%;
width:100%;
margin: 0;
padding: 0;
}
#wrapper {
height:100%;
width:100%;
min-width:1300px;
min-height:100%;
}
#top_bar {
width:100%;
height:45px;
min-width:1200px;
}
#top_add {
margin-left:15px;
height:14%;
width:100%;
min-width:1200px;
min-height:130px;
}
#left_logo {
width:215px;
height:100%;
float:left;
min-width:200px;
padding-left:20px;
}
#right_add {
width:980px;
height:100%;
float:left;
background-color:#E8E8E8;
min-width:750px;
}
#foot {
background-color:#333333;
width:100%;
height:250px;
}
What am i doing wrong? When the content size is small, the property defined as max-height:100% takes the whole page and shows is empty and displays the footer in the end which is found after scrolling.
you want to sticky footer right, so you must be used a css position to set it fixed anywhere in the page
for bottom div add this css
#foot{background-color:#333333;position:fixed;bottom:0px;width:100%;}
please visit live demo here http://jsfiddle.net/Zsg8G/
thank you...
EDITED: hello, i found the your problems please now try this code
<div id='wrapper'>
<div id="top_bar">
</div>
<div id="top_add">
<div if="left_logo">LOGO</div>
<div id="top_add">ADD</div>
</div>
<div id="content" style="">
<div>ABCD<br/><br/>ABCD<br/><br/>ABCD<br/><br/>ABCD<br/><br/>ABCD<br/><br/>ABCD<br/><br/>ABCD<br/><br/>ABCD<br/><br/>ABCD<br/><br/>ABCD<br/><br/>ABCD<br/><br/>ABCD<br/><br/>ABCD<br/><br/>
</div>
<div style="width:10%;height:auto;float:right;">ADV.
</div>
</div>
</div>
<div id="push"> </div>
<div id="foot">
Contact Us
</div>
html,body{height:100%;}
#wrapper
{
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -100px; /* Negative indent footer by it's height */
}
#push,#footer{height:100px;}
here you must be remove the float: left...
live demo with: more content: http://jsfiddle.net/SCr7b/1/ and with less content: http://jsfiddle.net/HYf7q/
thank you..
Check out Chris Braco's solution to this: http://cbracco.me/css-sticky-footer-effect/
Essentially you need to ensure there is padding below your body content to prevent an overflow under the footer, and use position: absolute; on the footer.
Here's your code with a working footer: http://codepen.io/anon/pen/IbmiC
Let me know if you have any issues with this.
Well i am developing a site and having trouble in CSS please help me to get rid of this issue.
You can see the following image for final results.
http://i51.tinypic.com/5bwpee.jpg
so i code like that
<div id="header">
<div class="pattern"></div> <!-- .pattern -->
<div id="wrapper">
<div class="topHeader">
</div>
</div>
</div> <!-- #header -->
and CSS is .. actually in the following codes i use gradient image of and use pattern image to overflow the background.
#header {
width:100%;
height:150px;
background:url(images/header_gradient.png) repeat-x;
}
.pattern {
width:100%;
height:150px;
background:url(images/header_transparent.png) repeat;
}
#wrapper {
width:1200px;
margin:0 auto;
background-color:#F00;
height:100px;
}
so please kindly help me to solve this problem that how i set logo and author details in center of header..
i tried position but maybe it goes wrong.
Now i edited my code the results below, but still having problem
<div id="wrapper">
<div id="header"></div>
<div id="pattern"></div>
<div id="main">
<img src="http://i52.tinypic.com/16i6z9d.jpg" />
</div>
</div>
CSS
#wrapper {
position:relative;
}
#header {
width:100%;
height:150px;
background:url(http://i55.tinypic.com/1zpgny8.jpg) repeat-x;
}
#pattern {
width:100%;
height:150px;
background:url(http://i51.tinypic.com/ao75eg.jpg) repeat;
position:absolute;
top:0px;
}
#main {
width:1200px;
margin:0 auto;
margin-top:-103px;
}
#main img {
z-index:5px;
}
after doing all this still having problem that the #pattern over all the layers. so please kindly help me to solve this issue.
Thank you all.
Create a div for your logo and sitename content.
Move the div towards the right with position:relative; left: 400px or whatever distance you need.
Float the logo and sitename to have them line up side by side.
Set the container div (#logoandsitename) to overflow:auto; to contain the floats.
HTML
<div id="header">
<div class="pattern"></div> <!-- .pattern -->
<div id="wrapper">
<div class="topHeader">
<div id="logoandsitename">
<img src="img.source" />
<span id="sitename">Your Site Name</span>
</div>
</div>
</div>
</div> <!-- #header -->
CSS
#logoandsitename {
overflow: auto;
width: 300px;
height: 100px;
position: relative;
left: 300px;
}
#logoandsitename img {
float:left;
}
#sitename {
float:left;
font-size: 40px;
}
That pretty much what you are looking for?
Why you need "width:1200px;" in #wrapper?
Why not you try this html?
<div id="header">
<div id="wrapper">
<div class="topHeader">
<div id="logo">Logo</div>
<div id="author">Author Details</div>
</div>
</div>
<div class="pattern"></div> <!-- .pattern -->
</div> <!-- #header -->
and this css:
#header {
width:100%;
height:150px;
background:url(images/header_gradient.png) repeat-x;
}
.pattern {
width:100%;
height:150px;
background:url(images/header_transparent.png) repeat;
}
#wrapper {
width:1200px;
margin:0 auto;
background-color:#F00;
height:100px;
}
#logo, #author{
width:200px;
height:50px;
float:left;
}
#author{
margin-left:20px;
}
.topHeader{
width:500px;
margin:0 auto;
}