I've this problem, i want to centralize a div inside a header, the problem is: I've 2 another div(one using float left and another using float right), see below:
<header>
<div class="left">Hello World App Left</div>
<div class="center">Center</div>
<div class="right">Right</div>
</header>
I try to use this css:
header{
width: 100%;
background-color:black;
margin-top:50px;
text-align:center;
}
.left{
float: left;
}
.center{
display: inline-block;
}
.right{
float: right;
}
But this didn't centralize my center div(almost, but didn't because it was affect by the another 2 div's), what options here i've to centralize this div?
See my plnkr.co
Try floating all divs left and setting width:33% to each.
To work off of a previous answer as a possible solution, you could indeed set each to 33%, but to prevent it from scaling, wrap the whole thing in a div. EG:
<div id='wrapper'>
<header>
<div class="left">Hello World App Left</div>
<div class="center">Center</div>
<div class="right">Right</div>
</header>
</div>
css:
header{
width: 100%;
background-color:black;
margin-top:50px;
text-align:center;
}
.left{
float left;
width:33%;
}
.center{
float:left;
width:34%;
}
.right{
float:left;
width:33%;
}
#wrapper{
width:1000px;
}
Related
I'm making a kind of image gallery with buttons on the left which trigger the emergence of corresponding images on the right. I want whatever image emerges on the right side be stacked with its description at all times, since it will have position:sticky value. Is there a way, only using CSS, to retrieve the image height so I can use its value along with top property to keep them stacked?
I hope this helps:
<style>
.container{
display:flex;
flex-direction:row;
padding:0;
margin:0;
}
.left{
width:70%;
}
.right{
text-align:center;
flex:1;
}
#big{
width:16em;
margin-bottom:5em;
}
.right *{
position: -webkit-sticky;
position: sticky;
top:14em;
}
.right p{
margin-bottom:5em;
top:31em;
}
</style>
<body>
<div class="container">
<div class="left">This is where buttons go</div>
<div class="right"><img id="big" src="ThisImageWillChange.jpg"><p>This description will change according to the image</p></div>
</div>
</body> ```
One thing you could do is have an inner container, then put position: absolute; top: 100%; on the <p> tag. This would force it just outside the bounds of the inner container.
.container{
display:flex;
flex-direction:row;
padding:0;
margin:0;
}
.left{
width:70%;
}
.right{
text-align:center;
flex:1;
}
#big{
width:16em;
margin-bottom:5em;
}
.right *{
position: -webkit-sticky;
position: sticky;
top:14em;
}
.right p{
position: aboslute;
top:100%;
}
<body>
<div class="container">
<div class="left">This is where buttons go</div>
<div class="right">
<div class="inner">
<img id="big" src="https://www.fillmurray.com/200/200">
<p>This description will change according to the image</p>
</div>
</div>
</div>
</body>
I need to do a website top with some navegations tools.
It is working but I'm not confortable with. I think maybe it is not the right way to do these floating divs on the right.
I need an image on the left and two itens on the right of a full width div.
So I did:
<div id="menu">
<div id="logo">LOGO</div>
<div id="item">Settings</div>
<div id="item">Options</div>
</div>
and
#menu{
position:fixed;
width:100%;
height:50px;
background:#fff;
}
#logo{
float:left;
right:30px;
}
#item{
float:right;
right:30px;
margin-right:10px;
}
Is it ok with float right and everything else or should I change something?
jsfiddle
on #item the right:30px does nothing if you dont specify the postion. Use
#item{
float:right;
position:relative;
right:30px;
}
Flexbox...no need for floats or positioning at all....and the items are in the right order.
#menu {
position: fixed;
width: 100%;
height: 50px;
background: #fff;
display: flex;
}
.logo {
margin-right: auto;
}
.item {
margin-right: 10px;
}
<div id=menu>
<div class="logo">LOGO</div>
<div class="item">Settings</div>
<div class="item">Options</div>
</div>
I'm trying this:
DIV 1 DIV 3
DIV 2 DIV 4
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
I'm trying to use clear:both but it makes a top margin..
Use other divs to float left 1 and 2 and float right 3 and 4 is not an option in this case..
Here is my css:
.div1 {
height:69px;
float:left;
width:48%;
clear:both;
background:pink;
}
.div2 {
height:200px;
margin-top:10px;
display:block;
float:left;
width:48%;
clear:both;
background:lightblue;
}
.div3 {
height:69px;
line-height:30px;
float:right;
width:48%;
background:red;
}
.div4 {
height:200px;
float:right;
width:48%;
background:yellow;
clear:both;
}
Try changing the order of the HTML and change the clear of the divs.
<div class="div1"></div>
<div class="div3"></div>
<div class="div2"></div>
<div class="div4"></div>
And CSS
.div1 {
height:69px;
float:left;
width:48%;
background:pink;
clear:left;
}
.div2 {
height:200px;
margin-top:10px;
display:block;
float:left;
width:48%;
background:lightblue;
clear:left;
}
.div3 {
height:69px;
line-height:30px;
float:right;
width:48%;
background:red;
clear:right
}
.div4 {
height:200px;
float:right;
width:48%;
background:yellow;
clear:right
}
JSFiddle: https://jsfiddle.net/6ywja6dn/
I have wrapped the divs in left and right in another div called "wrap1". Here is the fiddle. https://jsfiddle.net/4j4jasgn/1/ or you have to change the order of the div like - div1,div3,div2,div4
<div class="wrap1">
<div class="div1">1</div>
<div class="div2">2</div>
</div>
<div class="wrap1">
<div class="div3">3</div>
<div class="div4">4</div>
</div>
<style type="text/css">
.left-block{
float: left;
clear:left;
width: 50%;
}
.right-block{
margin-left: 50%;
}
</style>
<div class="div1 left-block">Div 1 with float left</div>
<div class="div2 left-block">Div 2 with float left</div>
<div class="div3 right-block">Div 3 No float</div>
<div class="div4 right-block">Div 4 No float</div>
The answers above are not in line with what TO wants.
He says he can't change the order of the divs.
As div's are floated in relation the the closest floating element, it is not possible to float div 3 next to div 1.
The solution is to give div 1 a float left, div 2 a float left, div 3 a position absolute, and div 4 a float right.
This is also a responsive solution, as div's 3 and 4 will position themselves under div 1 and 2.
See this example, move the vertical center line to make the screen smaller and see the div's lining up below each other.
https://jsfiddle.net/6ywja6dn/2/
.div.one { float: left; background: blue; }
.div.two { float: left; clear: left; background: red; }
.div.three { position: absolute; top: 0px; left: 52%; background: purple; }
.div.four { float: right; background: green; }
#media (max-width: 600px) {
.div.one { }
.div.two { }
.div.three { position: static; float: left; clear: left; }
.div.four { float: left; clear: left; }
}
you shouldn't have to use calculation for this.
you put 3(!) div's inside a wrapper div. give the first two the desired width and set the third to display: block and clear: both. Set the divs alternating to float left and right and bob's your uncle.
HTML
<div id='wrapper-div'>
<div id='left-div'>
put your left-div content here.
</div>
<div id='right-div'>
put your right-div content here.
</div>
<div id='clearing-div'></div> <!-- no content here-->
</div>
CSS
#wrapper-div {
width: 600px;
margin: 0px auto;
}
#left-div {
width: 48%;
float: left;
}
#right-div {
width: 48%;
float: right;
}
#clearing-div {
display: block;
clear: both;
}
why this works?
because of the display: block the clearing-div will fill-up the entire width of the wrapper-div. because of clear: both that doesn't allow floating objects either left or right of this div the div is placed on a new line, filling up the entire width of the wrapper-div.
In this case with the width of 48% both will appear about half the size of the wrapper-div.When you choose a set width of 200px for example, they float both left and right with 200px in between them.
if you have 4 divs you want to have 2 by 2 floating left and right you can put 2 divs inside the left-div and the right-div, looking something like this:
<div id='wrapper-div'>
<div id='left-div'>
<div class="div1">1</div>
<div class="div2">2</div>
</div>
<div id='right-div'>
<div class="div3">3</div>
<div class="div4">4</div>
</div>
<div id='clearing-div'></div> <!-- no content here-->
</div>
Can you reorder the divs you've got? If so, then you could replace the display:block, float and clear style rules with display:inline-block (for all four divs).
Then you'd have to reorder the divs as (1, 3, 2, 4) to match your original layout.
I'm working on a small PHP script, I made 2 divs and I used the float to show the two divs in the same line. But I still have a problem with background because the two divs do not have the same height.
This is the css code:
.wrapper{
width:200px;
}
.content{
width:200px;
}
.right{
float:right;
width:100px;
background:yellow;
}
.left{
float:right;
width:100px;
background:red;
}
.clear{
clear:both;
}
And this is the html code:
<div class="wrapper">
<div class="content">
<div class="right">
sdiousoiudosud sdiousoiudosud sdiousoiudosud sdiousoiudosud
</div>
<div class="left">
iuoiu
</div>
<div class="clear">
</div>
</div>
</div>
You should use display: table-cell:
.left, .right{
display: table-cell;
width: 100px;
}
.right{
background:yellow;
}
.left{
background:red;
}
Demo
If you want you can also use display: table-row and display:table, and set all widths. But it isn't necessary. Demo
The "good way" is using display: table-cell, as I explained in my other answer.
But if you want to support old browsers like IE7, you can use the following trick:
.content{
overflow: hidden;
}
.left, .right{
float: left;
width: 100px;
padding-bottom: 10000px;
margin-bottom: -10000px;
}
.right{
background:yellow;
}
.left{
background:red;
}
Where 10000px can be any value greater than the height of the highest element.
Demo
I have one content div with 960px of width and margin 0 auto (centralized), i want put one div occupying all the space of the left margin, how can i do that?
demo jsBin
#container{
position:relative;
width:300px;/*change this*/
margin:0 auto;
height:200px;
background:#cf5;
padding-left:50%;
margin-left:-150px; /*half the width*/
}
#centered{
width:300px;
height:100%;
position:absolute;
right:0px;
background:#eea;
}
HTML:
<div id="container">
<div id="centered">centered</div>
</div>
HERE: http://jsbin.com/oluwos/3/edit is another way to do it.
Use display: table, like this:
http://jsfiddle.net/yVFzh/
<div class="wrapper">
<div class="left-column"> </div>
<div class="centre"></div>
<div class="right-column"> </div>
</div>
html,
body{
width:100%;
}
.wrapper{
display:table;
width:100%;
}
.wrapper > div{
display: table-cell;
background: blue;
height:400px;
}
.wrapper .centre{
width: 960px;
background: yellow;
}