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>
Related
Imagine a code like this:
.div {
width: 100%;
height: 100px;
background-color: green;
}
.div1 {
width: 100px;
height: 100px;
background-color: red;
}
.div2 {
width: 100px;
height: 100px;
background-color: blue;
}
.main {
background-color: yellow;
}
<div class="main">
<div>
<div class="div"></div>
<div class="div1"></div>
</div>
<div class="div2"></div>
</div>
It will render something like this:
I want that the blue div comes up and stay on the right of the red div. Imagine that I can´t change the divs from where they are, so I need to do it in css. How can I do it?
Without changing the markup, if you set float: left to the red <div> then you could put the blue <div> to its right side
.div {
width: 100%;
height: 100px;
background-color: green;
}
.div1 {
width: 100px;
height: 100px;
background-color: red;
float: left;
}
.div2 {
width: 100px;
height: 100px;
background-color: blue;
display: inline-block;
vertical-align: top;
}
.main {
background-color: yellow;
}
<div class="main">
<div>
<div class="div"></div>
<div class="div1"></div>
</div>
<div class="div2"></div>
</div>
The previous solution which uses float on the red div works well, but here is another possible solution:
Apply position: relative; to the blue div (to be able to move it in relation to its default position) and add top: -100px; left: 100px; to move it up next to the red div:
.div {
width: 100%;
height: 100px;
background-color: green;
}
.div1 {
width: 100px;
height: 100px;
background-color: red;
}
.div2 {
width: 100px;
height: 100px;
background-color: blue;
position: relative;
top: -100px;
left: 100px;
}
.main {
background-color: yellow;
}
<div class="main">
<div>
<div class="div"></div>
<div class="div1"></div>
</div>
<div class="div2"></div>
</div>
This can also be done with the grid CSS. Here I used a named template box and then in the "chatty verbose" CSS I put the positional related for each "block". I added classes to the CSS just for clarity but you could update to your classes.
I added some color and things just for clarity and visual references but kept the "position relate" in separate CSS chunks.
.main {
font-size: 2rem;
display: grid;
grid-template: "box";
background-color: yellow;
}
.main *,
.main::before {
grid-area: box;
}
.green-block {
place-self: start;
}
.red-block {
width: 50%;
place-self: end start;
}
.blue-block {
width: 50%;
place-self: end end;
}
.green-block {
height: 3rem;
background-color: green;
}
.red-block {
height: 3rem;
background-color: red;
}
.blue-block {
background-color: blue;
}
.blue-block,
.green-block,
.red-block {
/* color for clarity and just to super center the text in the blocks */
display: grid;
color: cyan;
font-family: sans-serif;
text-transform: uppercase;
place-items: center;
}
<div class="main">
<div>
<div class="div green-block">green</div>
<div class="div1 red-block">red</div>
</div>
<div class="div2 blue-block">blue</div>
</div>
I would like to position some DIV by it's distance from the right side of the container, or from the left side from the container, or centered; but everything without of excluding it from the flow, like absolute does.
Is it possible?
The only thing I can is centered. I can't believe this is not easily possible!
#outer {
position: relative;
width: 100%;
}
#first {
position: relative;
background-color: red;
width: 100px;
right: 10px;
}
#second {
position: relative;
background-color: green;
width: 100px;
}
#third {
position: relative;
background-color: yellow;
width: 100px;
margin-left: auto;
margin-right: auto;
}
The sample is here: https://jsfiddle.net/dimskraft/vm3Lg835/8/
If I make absolute position, another DIV starts to ignore absoluted one...
UPDATE
Visual explanation of what I want:
UPDATE 2
Incredible!
Isn't this task have simple solution? Without any cheating / hacking??
I just want to set distance from right side. Why can't I do this with ONE property???
This one do what you ask, keeping the flow and your original html structure.
I also added a "centered" div, which you commented might be needed.
(As per request, I added a second group of 3 div's in below sample using margins only, and here is also a fiddle: http://jsfiddle.net/qxvoLr5u/2/)
html, body {
margin: 0;
}
#outer {
width: 100%;
text-align: right;
}
#first {
display: inline-block;
width: 100px;
background-color: red;
text-align: left;
margin-right: 10px;
}
#second {
background-color: green;
width:100px;
text-align: left;
}
#third {
display: inline-block;
background-color: yellow;
width:100px;
text-align: left;
position: relative;
right: 50%;
margin-right: -50px;
}
/* sample 2 */
#outer2 div:before {
content: attr(class);
}
.div1 {
width: 100px;
margin-left: auto;
margin-right: 10px;
background-color: red;
}
.div2 {
width: 100px;
margin-right: auto;
background-color: green;
}
.div3 {
width: 100px;
margin-left: auto;
margin-right: auto;
background-color: yellow;
}
<div id="outer">
<div id="first">
</div>
<div id="second">
</div>
<div id="third">
</div>
</div>
<br />
<hr />
As per request, these 3 divs use margin only<br />
<hr />
<div id="outer2">
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</div>
I would probably wrap it in another relative div that has text-align:right and then give first display:inline-block:
https://jsfiddle.net/aqvug8uj/2/
I think this is best solution https://jsfiddle.net/vm3Lg835/6/
CSS
#outer {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
}
#first {
background-color: red;
width:100px;
right:10px;
align-self: flex-end;
margin-right: 10px;
}
#second {
background-color: green;
width:100px;
}
I found your question to be a bit confusing, to be honest. If I have understood you correctly, aligning stuff the way you describe it is simple, to the point of being trivial, with float and clear.
#outer {
width=100%;
}
#first {
background-color: red;
width:100px;
float: right;
margin-right:10px;
}
#second {
background-color: green;
width:100px;
clear: right;
}
#third {
background-color: yellow;
width:100px;
margin-left: auto;
margin-right: auto;
}
Is that what you wanted to achieve? Here's the fiddle.
Use the following code:
HTML:
<div id="outer">
<div id="first"> </div>
<div id="second"> </div>
<div class="clearboth"></div>
</div>
CSS:
#outer {
position: absolute;
}
#first {
background-color: red;
width:100px;
float: left;
}
#second {
background-color: green;
width:100px;
float: right;
}
.clearboth
{
clear: both;
}
UPDATEDAdd margin-left: 100px; according to your need.
It should work for you.
Take a look
#outer {
position: relative;
width=100%;
}
#first {
margin-left:350px;
position: relative;
background-color: red;
width:100px;
right:10px;
float:left;
}
#second {
position: relative;
background-color: green;
width:100px;
float:left;
}
<div id="outer">
<div id="first"> </div>
<div id="second"> </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'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;
}
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