I'm trying to fully comprehend a float issue. In the code below, when div1 is floated left div2 snaps underneath it as expected, except for the paragraph text. Why does the paragraph text extend below div1 when the divs are identical?
HTML
<div id="div1">
<p>This is div1</p>
</div>
<div id="div2">
<p>This is div2</p>
</div>
CSS:
#div1 {
width: 100px;
height: 100px;
background-color: yellow;
float:left;
}
#div2 {
width: 100px;
height: 100px;
background-color: red;
border: 1px black solid;
}
https://jsfiddle.net/u9nugwbg/2/
You need ta moke position:absolute; in div1
The code
#parent {
background-color: blue;
width: 500px;
height: 300px;
}
#div1 {
width: 100px;
height: 100px;
background-color: yellow;
float:left;
position:absolute; <!--Make position:absolute-->
}
#div2 {
width: 100px;
height: 100px;
background-color: red;
border: 1px black solid;
}
<div id="parent">
<div id="div1">
<p>This is div1</p>
</div>
<div id="div2">
<p>This is div2</p>
</div>
</div><!--closes parent-->
If you remove div1 you'll see the <p> is in the yellow div.
You need ta moke foat:left; in div2. The Code:
#div2
{
float: left;
width: 100px;
height: 100px;
background-color: red;
border: 1px black solid;
}
#parent {
background-color: blue;
width: 500px;
height: 300px;
}
#div1 {
width: 100px;
height: 100px;
background-color: yellow;
float:left;
}
Related
I've seen an article about vertical centering of text and image. I've seen an article about vertical centering text inside a floated div.
But not both conditions.
Here's my experiment:
.phase {
width: 500px;
height: 500px;
border: 1px solid red;
}
.float-right {
float: right;
}
.carousel {
height: 300px;
display: table-cell;
vertical-align: middle;
border: 1px solid orange;
}
.circle {
float: left;
height: 50px;
width: 50px;
vertical-align: middle;
border: 1px solid green;
border-radius: 50%;
background-color: white;
}
.thumbnail {
float: left;
}
<div class="phase">
<div class="float-right">
<div class="carousel">
<div class="circle">
</div>
<div class="thumbnail">
<img src="https://www.google.com/images/nav_logo231.png" style="width:160px;height:160px;vertical-align:middle" />
</div>
</div>
</div>
<h1>I love css</h1>
</div>
Notice the image is vertically centered, but the green circle is not vertically centered.
How can I get both the image and the green circle vertically centered?
You can achieve a totally centered element using calc and view-units:
#example {
width: 100px;
height: 100px;
border: 1px solid green;
border-radius: 50px;
position: fixed;
top: calc(50vh - 50px);
left: calc(50vw - 50px);
}
<div id="example"></div>
This example will keep it right in the centre even with scrolling, etc - but you could place it centre based on the initial view using an absolute position.
My fixed code. It works in IE and in Chrome.
top: calc(0.5vh + 50px); is what does the trick. 50px of course would be the height of the element you want to vertically center.
.phase {
width: 500px;
height: 500px;
border: 1px solid red;
}
.float-right {
float: right;
}
.carousel {
height: 300px;
display: table-cell;
vertical-align: middle;
border: 1px solid orange;
}
.circle {
position: relative;
float: left;
top: calc(0.5vh + 50px);
height: 50px;
width: 50px;
vertical-align: middle;
border: 1px solid green;
border-radius: 50%;
background-color: white;
}
.thumbnail {
float: left;
border: 1px solid black;
}
<div class="phase">
<div class="float-right">
<div class="carousel">
<div class="circle">
</div>
<div class="thumbnail">
<img src="https://www.google.com/images/nav_logo231.png" style="width:160px;height:160px;" />
</div>
</div>
</div>
<h1>I love css</h1>
</div>
You need to place the circle in a container and set the container's line-height property. Try this:
.phase {
width: 500px;
border: 1px solid red;
}
.float-right {
float: right;
}
.carousel {
height: 300px;
display: table-cell;
vertical-align: middle;
border: 1px solid orange;
}
.container {
float: left;
height: 300px;
line-height: 300px;
}
.circle {
display: inline-block;
height: 50px;
width: 50px;
border: 1px solid green;
border-radius: 50%;
background-color: white;
}
.thumbnail {
display: inline-block;
}
<div class="phase">
<div class="float-right">
<div class="carousel">
<div class="container"><div class="circle">
</div></div>
<div class="container"><div class="thumbnail">
<img src="https://www.google.com/images/nav_logo231.png" style="width:160px;height:160px;vertical-align:middle" />
</div></div>
</div>
</div>
</div>
I have here some code
.container{
height: 200px;
width: 100%;
background-color: black;
}
.container_1{
margin-bottom: 50px;
height: 200px;
width: 20000px;
background-color: black;
}
<div class="container_1">
</div>
<div class="container">
</div>
If you scroll to right side, the .container stopped. But I gave him a with of 100%, why it won't work?
It is 100% of its parent, which is the body. The body didn't get an explicit width, so it's just as wide as the client size of the window. The other div is forced to be wider (20000px), so it extends outside of the bounds of the body.
In the snippet below, I've added a border to the body, so you can see how the second div snugly fits into that boundary.
.container {
height: 200px;
width: 100%;
background-color: black;
opacity: 0.5;
}
.container_1 {
opacity: 0.5;
margin-bottom: 50px;
height: 200px;
width: 20000px;
background-color: black;
}
body {
border: 3px solid red;
}
<div class="container_1">
</div>
<div class="container">
</div>
Because its 100% of the view port
Try this,
.main_container{
float:left;
}
.container{
height: 200px;
width: 100%;
background-color: black;
}
.container_1{
margin-bottom: 50px;
height: 200px;
width: 20000px;
background-color: black;
}
<div class="main_container">
<div class="container_1">
</div>
<div class="container">
</div>
</div>
I am having trouble with some floated boxes in CSS.
<div class="container">
<div class="one">One</div>
<div class="two">Two</div>
<div class="tre">Three - The HTML structure should stay like this, but this box should be starting to the left of the red box.</div>
</div>
Here is the pen:
http://codepen.io/anon/pen/myKzMd
I want the left green box to start on the same height as the red one. HTML structure should stay as is.
Thanks,
Sascha
This code below will get the result you want.
HTML
<div class="container">
<div class="one">One</div>
<div class="two">Two</div>
<div class="tre">Three - The HTML structure should stay like this, but this box should be starting to the left of the red box.</div>
</div>
CSS
.container {
height:400px;
border: 5px solid green;
}
.one {
height: 100px;
background: red;
width: 60%;
float: right;
margin-bottom: 10px;
}
.two {
height: 100px;
background: blue;
width: 60%;
float: right;
}
.tre {
height: 150px;
background: green;
width: 40%;
}
EDIT: Updated the answer with full code, to avoid confusing, since OP has updated the demo in the question. So no float on .tre would be the best solution to me.
.tre {
float: left;
}
Dont forget to put overflow:hidden in parent div ie .container because once you float the child elements you have to put overflow:hidden in its
try this out :
.container {
height:400px;
border: 5px solid green;
}
.one {
height: 100px;
background: red;
width: 60%;
float: right;
margin-left:40%;
margin-bottom: 10px;
}
.two {
height: 100px;
background: blue;
width: 60%;
float: right;
}
.tre {
height: 150px;
background: green;
width: 40%;
}
.container {
height:400px;
border: 5px solid green;
}
.one {
width: 40%;
height: 100%;
float: left;
background: blue;
}
.two, .three {
width: 60%;
height: 50%;
float:right;
}
.two {
background: yellow;
}
.three {
background: red;
}
You can change your structure like below...
<div class="container">
<div class="one">One</div>
<div class="tre">Three - The HTML structure should stay like this, but this box should be starting to the left of the red box.</div>
<div class="two">Two</div>
</div>
HTML:
<div id="outer1">
<div class="bg">
<div class="top"></div>
<div class="base"></div>
</div>
<div class="content"></div>
</div>
<div id="outer2">
<div id="bg">
<div class="top"></div>
<div class="base"></div>
</div>
<div class="content"></div>
</div>
CSS2:
div { width: 100%; }
#outer1, #outer2 {position: relative;}
#outer1 .top { height: 200px; background-color: blue; }
#outer1 .base { height: 200px; background-color: yellow; }
#outer2 .top { height: 200px; background-color: green; }
#outer2 .base { height: 200px; background-color: yellow; }
.content {
width: 160px; margin: 0 auto;
position: relative; bottom: 250px; height: 300px; background-color: white; border: 1px solid black;}
This is the fiddle
The white, black-bordered div (.content) is supposed to sit on the split-coloured background (.bg) (as it is).
Using relative positioning - but the space i've told it to move up by (250px), is still been taken by it's parent (#outer1). (there's a gap between to the two 'outer' divs - they should be touching)
I tried absolute positioning but because the content div is taller than the relative content, the height is not honoured. And becuase it's dynamic content I cannot give it a fixed height (although i did for illustration)
One option is javascript, another is using a background-repeater for the top half.
Can it be achieved with pure CSS2?
Edit: Complete rewrite...
Here is the new fiddle: http://jsfiddle.net/FSXj8/14/
Okay so I took the liberty to start from scratch. Here is the html
<div id="outer1" class="container">
<div class="content">
<div class="innerContent">hello world</div>
</div>
<div class="top"></div>
<div class="base"></div>
</div>
<div id="outer2" class="container">
<div class="content">
<div class="innerContent">hello world</div>
</div>
<div class="top"></div>
<div class="base"></div>
</div>
And here is the CSS
div {
width: 100%;
}
.container {
height: 400px;
display: table;
position: relative;
}
.top, .base {
position: absolute;
left: 0;
height: 50%;
z-index: 0;
}
.top {
top: 0;
}
.base {
bottom: 0;
}
#outer1 .top {
background-color: blue;
}
#outer1 .base {
background-color: yellow;
}
#outer2 .top {
height: 50%;
background-color: green;
}
#outer2 .base {
height: 50%;
background-color: yellow;
}
.innerContent {
min-height: 100px;
border: 1px solid black;
background-color: white;
width: 100px;
}
.content {
display: table-cell;
position: relative;
vertical-align: middle;
z-index: 1;
background-color: transparent;
height: 100%;
}
Not sure if this is what you want, you said something about not using absolute:
.content {
width: 100px; margin 0 auto;
position: absolute; margin-top:-250px; height: 100px; background-color: white; border: 1px solid black;}
http://jsfiddle.net/FSXj8/7/
My navbar (940px for instance) contains 3 divs :
One aligned left (automatic sizing) containing a menu
One aligned right (defined size, 100px for instance) containing a logo
One (automatic sizing) containing an input[type="text"] that should stick to left and right divs
Each div will have a different background/opacity, there must not have overlapping between them.
He is a drawing about what I need :
+------------------+-------------------------------------------+-----------------+
| MENU | INPUT TYPE TEXT (width: 100%) | LOGO |
+------------------+-------------------------------------------+-----------------+
Do you have an idea on how to do that? Thanks in advance.
Don't float the center <div>. If you move it below the floating elements, it will sit between the floated elements. Adding overflow: hidden to the middle element prevents it from flowing beneath the floated elements.
HTML from your example:
<div class="container">
<div class="left">menu1 menu2 menu3</div>
<div class="right">right</div>
<div class="center">
<input type="text" class="form-control" />
</div>
</div>
and the CSS:
.container {
width: 400px;
height: 100px;
background-color: red;
}
.left {
height: 100px;
background: green;
float: left;
}
.center {
height: 500px;
background: blue;
overflow: hidden;
}
.right {
width: 50px;
height: 100px;
background: yellow;
float: right;
}
check this fiddle I made 3 div's and 1 container. hope it helps.
body
{
margin: 0px;
padding: 0px;
}
.container
{
width: 100%;
height: 200px;
}
.left
{
width: 50px;
height: 200px;
background: green;
float: left;
}
.center
{
width: 68%;
height: 200px;
background: blue;
float: left;
}
.right
{
width: 50px;
height: 200px;
background: yellow;
float: left;
}
Rearrange your HTML so the elements are in this order:
<div class="container">
<div class="left">menu1 menu2 menu3</div>
<div class="right">right</div>
<div class="center">
<input type="text" class="form-control" />
</div>
</div>
Then use this CSS:
.container {
width: 400px;
height: 100px;
background-color: red;
}
.left {
height: 100px;
background: green;
float: left;
}
.center {
height: 100px;
background: blue;
}
.right {
width: 50px;
height: 100px;
background: yellow;
float: right;
}
jsFiddle example
Move the item you want on the right to the first position in the HTML:
<div class="wrap">
<div class="r">Logo</div>
<div class="l">Menu</div>
<div class="c">Center content</div>
</div>
Then it's simply CSS:
.wrap { background: #ddd; margin: 10px; }
.wrap > div { padding: 10px;}
.r { float: right; background: #aaa; width: 100px; }
.l { float: left; background: #eee; width: 100px; }
.c { text-align: center; }
DEMO HERE