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/
Related
If we inspect the code,you will see that the div.header has height: 0px;
Look at image below:
I want my div to be the size of three elements .c1,.c2 and.c3`
How can I solve this problem?
I hope as well that we managed to explain my problem.
HTML:
<div class="container">
<div class="header">
<div class="c1">asdsadsadsadasda</div>
<div class="c2">asdasdas</div>
<div class="c3">sadsada</div>
</div>
</div>
CSS:
.container
{
width:100%;
height:500px;
background:red;
}
.c1
{
width:auto;
height:auto;
background:yellow;
}
.c2
{
width:auto;
height:auto;
background:gray;
}
.c3
{
width:auto;
height:auto;
background:orange;
}
.c1,.c2,.c3{width:33%;float:left;}
.header{width:70%;height:auto;margin:0 auto;background:blue;}
JSFiddle
Add overflow: auto(for example) css property to your .header class to recognize it's children's height.
JSFiddle
Use clearing divs.
HTML:
<div class="container">
<div class="header">
<div class="c1">asdsadsadsadasda</div>
<div class="c2">asdasdas</div>
<div class="c3">sadsada</div>
<div class='clearing'></div>
</div>
</div>
CSS:
.clearing {clear:both;}
I am trying to do what showed in the following example: http://jsfiddle.net/A8zLY/5/
but the order of the divs shuold be opposite, I need the left div first (I need the div with the role width:auto; to be first):
<div class="left"></div>
<div class="right"></div>
One way to achieve the same layout with the order of divs changed in the markup is to use absolute positioning :
.container {
width:600px;
height:200px;
border:1px solid;
position:relative;
}
.left {
margin-left:200px;
height:200px;
background:red;
}
.right {
height:200px;
width:200px;
background:blue;
position:absolute;
top:0; left:0;
}
<div class="container">
<div class="left"></div>
<div class="right"></div>
</div>
change .right class float:left to float:right
code:
.right{float:right;}
Long challenge I have had, and I just need to ask for help now.
I have a container for divs:
<div id="container">
<div id="1">Bla</div>
<div id="2">Bla</div>
<div id="3">Bla</div>
<div id="4">Bla</div>
<div id="5">Bla</div>
</div>
Now, div 1 and 2 should be fixed and floating on the left. Width 50%. All the other divs, should be on the right and just continue to float on the right no matter how long and how many divs I add. Width is also 50%.
Im thinking of something like this:
|--1--|--3--|
|--2--|--4--|
|-----|--5--|
|-----|--6--|
|-----|-----|
Any tips? I am just confused on relative and absolute and what is supposed to float where...
I should add, div 1 and 2 should be "scroll" fixed. So position: fixed. Its a bit how the facebook newsfeed is strcutured.
Any help is greatly appreciated. :)
I think i solved your problems. You can use this code for your problem it may be help me.You can add many div in second column but you should use this width:50%; background:pink; float:left; margin-left:50%; css code. You can change background according to you.
Live Working Demo
HTML Code:
<div id="container">
<div id="one">1</div>
<div id="two">2</div>
<div id="three">3</div>
<div id="four">4</div>
<div id="five">5</div>
<div id="six">6</div>
<div id="seven">7</div>
</div>
CSS Code:
#container
{
width:100%;
height:100%;
}
#one
{
width:50%;
background:red;
}
#two
{
width:50%;
background:green;
float:left;vertical-align:top;
}
#three
{
width:50%;
background:blue;
float:left;
margin-top:-20px;
}
#four
{
width:50%;
background:gray;
float:left;
margin-left:50%;
margin-top:-20px;
}
#five
{
width:50%;
background:violet;
float:left;
margin-left:50%;
}
#six
{
width:50%;
background:gold;
float:left;
margin-left:50%;
}
#seven
{
width:50%;
background:pink;
float:left;
margin-left:50%;
}
Result:
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.
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/