Please consider the problem posed by the following code:
<div id='container'>
<div id='topLeft' style='background-color:red;float:left'>Top Left</div>
<div id='topRight' style='background-color:green;float:left;font-size:x-large'>Top Right</div>
<div id='clearDiv' style='clear:both;'></div>
<div id='bottom' style='background-color: yellow;'>Bottom</div>
</div>
In a fiddle I've created, this produces the following result:
The problem with this, as far as the page I'm working on is concerned, is that space above the yellow div labelled bottom, caused by the additional height of the green div (Top Right). I want the yellow div to be right up against the bottom of the red div (Top Left), regardless of the height of the green div.
Now, this is easily enough fixed by using positioning, as follows (fiddle here):
<div id='container' style='position:relative'>
<div id='topLeft' style='background-color:red;float:left;width:100px'>Top Left</div>
<div id='topRight' style='background-color:green;float:left;font-size:x-large;position:absolute;left:100px;z-index:-1'>Top Right</div>
<div id='clearDiv' style='clear:both;'></div>
<div id='bottom' style='background-color: yellow;'>Bottom</div>
</div>
Which produces the following result:
That's exactly what I want. Unfortunately, because the green Top Right div is now positioned absolutely, I now have to specify its left position to ensure that it still appears to the right of the red (Top Left) div.
In the application I'm writing, I'm having to expend a lot of effort to continually position the equivalent of this green div to the right of the red div, when no effort would be required at all if it didn't have the position:absolute attribute. Without that, it'd just naturally appear after the red div, as it did in the result of the first code sample.
So my question is: Is there a way to achieve the same result as I have with my solution - that is, the top of the yellow div being up against the bottom of the red div - without adding position:absolute to the green div?
Update following Ned Rockson's answer, I should add that explicitly setting the height of any of these divs or a wrapper div isn't possible either.
#container {
display: flex;
flex-direction: column;
align-items: flex-start;
}
#topLeft {
background-color: red;
}
#wrapper {
position: relative;
}
#topRight {
background-color: green;
font-size: x-large;
position: absolute;
left: 100%;
top: 0;
width: 5em; /* THIS IS THE ONLY "MANUAL" SETTING */
}
#bottom {
background-color: yellow;
width: 100%;
}
<div id='container'>
<div id='wrapper'>
<div id='topLeft'>
Top Left
</div>
<div id='topRight'>
Top Right
</div>
</div>
<div id='bottom'>
Bottom
</div>
</div>
This solution requires you to "manually" set the width of the topRight element, but heights are automatically handled by the CSS.
You can wrap the top left and top right divs in a div with height set and overflow set to hidden. It's not a very elegant approach because the outer div's height is set, but it works for this particular problem.
<html>
<body>
<div id='container' style='position:relative'>
<div style='overflow:hidden; height:18px'>
<div id='topLeft' style='background-color:red;float:left;width:100px'>Top Left</div>
<div id='topRight' style='background-color:green;float:left;font-size:x-large'>Top Right</div>
</div>
<div id='clearDiv' style='clear:both;'></div>
<div id='bottom' style='background-color: yellow;'>Bottom</div>
</div>
</body>
</html>
If you want the upper two DIVs bottom-aligned despite their different height, you can assign them this instead of floats:
#topLeft, #topRight {
display: inline-block;
vertical-align: bottom;
}
Here is the complete code:
#topLeft, #topRight {
display: inline-block;
vertical-align: bottom;
}
<div id='container'>
<div id='topLeft' style='background-color:red;'>Top Left
</div><div id='topRight' style='background-color:green;font-size:x-large'>Top Right</div>
<div id='clearDiv'></div>
<div id='bottom' style='background-color: yellow;'>Bottom</div>
</div>
Note that I moved the closing </div> of the .topLeft element into the next line to avoid any spaces and linebreaks in the code.
Alternative solution using flex:
If you need topLeft and topRight to have the same height, you can wrap them in a parent container and assign display: flex to this container:
#wrapTop {
display: flex;
}
<div id='container'>
<div id="wrapTop">
<div id='topLeft' style='background-color:red;'>Top Left</div>
<div id='topRight' style='background-color:green;font-size:x-large'>Top Right</div>
</div> <div id='clearDiv'></div>
<div id='bottom' style='background-color: yellow;'>Bottom</div>
</div>
Related
guys, I'm trying to achieve a layout, where I have a container with 2 cols, however, the right col needs to be positioned to the right of the screen, and not to the right of the container... if that makes sense?
<div class="container">
<div class="row">
<div class="col-lg-6">
this content is inside the container normally
</div>
<div class="col-lg-6">
image will go here, but needs to be positioned to the right of the screen, not to the right of the container
</div>
</div>
</div>
Try putting text in div and then add class mr-0 to it.
This is how you can do it.
Working Example
<div class=".parent">
<div class="child">
image will go here, but needs to be positioned to the right of the screen, not to the right of the container
</div>
<div class="abs">
<div class="container">
<div class="row">
<div class="col-sm-6">
this content is inside the container normallythis content is inside the container normally
</div>
</div>
</div>
</div>
</div>
.parent {
position: relative;
}
.child {
float: right;
width: 50%;
background: red;
}
.abs {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.container {
border: 1px solid green;
}
My question is about CSS and DIV tags. I have a dynamic page, and I would like one container DIV. There are two scenarios: in one case, this container DIV will just have one DIV in it, with a width of 50%, and should be centered. In the other case, there will be two DIVs in it, and they should be side by side, each taking up 50%.
I have tried float:center (using overflow: hidden on the container DIV), and that works for 1 DIV in it, but with two, they are stacked on top of each other. If I use float: left, then the 2 DIVS appear correct, but the single DIV is left aligned, not centered.
Any help on how to achieve this effectively would be greatly appreciated!
<div style="width:800; margin: 2px; background-color:blue">
<div style="width:50%; background-color:orange;">
Text
</div>
<div style="width:50%; background-color:red;">
Text
</div>
</div>
jsFiddle
For the two-div scenario:
<div style="width:800; margin: 2px; background-color:blue; display: table;">
<div style="background-color:orange; display: table-cell;">
Text
</div>
<div style="background-color:red; display: table-cell;">
Text
</div>
</div>
Now for the one-div scenario:
<div style="width:800; margin: 2px; background-color:blue; display: table;">
<div style="background-color:orange; display: table-cell;">
Text
</div>
</div>
In each case, the inner divs, whether there are 1 or 2, will take up a combined 100% of the outer div. Essentially, it acts like the <table> element without having the semantics of a <table>.
check this fiddle
HTML
<div class="wrapper">
<div class="divholder">
<div style="background-color:orange;">DIV 1</div>
<div style="background-color:red;">DIV 2</div>
</div>
</div>
CSS
.divholder div{
display:inline-block;
margin:auto;
width:49%;
}
.divholder {
text-align:center;
margin: 0 auto;
position:relative;
}
.wrapper{
width:100%;
background-color:blue;
}
This perfectly deals with your need..While there is only one div, the div gets centered and if two divs come then both will be equally divided and floated left.Please see the fiddle..
Similar to chharvey's answer, this can be achieved nicely with display: table;
In my example it is centered horizontally and will work with any number of columns as they will fit themselves to the full width of div.wrap. The columns are currently given a height of 100%, this can be adjusted.
Have a jsBin example!
HTML
<div class="wrap">
<div class="column">
</div>
<div class="column">
</div>
</div>
CSS
html,body {
height: 100%;
}
.wrap {
display: table;
width: 800px;
height: 100%;
margin: 0 auto;
}
.column {
display: table-cell;
background: #FF0;
}
.column:first-child {
background: #F00;
}
Sorry, I'm sure this question has been asked before, but if there anyway to do the following:
I have three divs in-line like the diagram shown below, when the browser window is shrunk it automatically drops each div to the next line. I know that I could use the #media command and assign a different css stylesheet if the browser is a certain size, but it would be great if I could make it fluid.
Before:
After:
Thank you!
Wrap the divs in a container element, like....
<div class="wrapper">
<div id="elem1"></div>
<div id="elem2"></div>
<div id="elem3"></div>
</div>
Then make sure .wrapper has a set width, most likely a percentage. If it has a set width and the inline elements are all floated left, once there is no longer room within the .wrapper div, they'll shift to the next line.
Try:
<div class='box'></div>
<div class='box'></div>
<div class='box'></div>
and:
.box {
background: #000;
width: 300px;
height: 300px;
float: left;
}
They should automatically drop when below 900px, see: http://jsfiddle.net/JQFH7/
Elements into it
<div id="wrapper">
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
<div>
CSS
.inner
{
width: 100px;
height: 100px;
display: inline-block;
background: black;
}
div#wrapper
{
width: 100%;
text-align: center;
}
JSFiddle
I hope that someone can help me about this problem. I have structure like this
<div id="Div1" style="height:auto">
<div id="Div2" style="height:100%;">
<div id="Div3" style="min-height:100%;"></div>
<div id="Div4" style="height:100%;"></div>
</div>
</div>
Also I put in my css file
html,body
{
height: 100%;
}
Problem is that neither Div3 nor Div4 have the expected height of 100%, I check size of first two divs with firbug and they are ok, filling the whole screen.
Sorry for my bad English, I hope that you understand my question :)
Have a look at this. When using a percentage, each div will be affected by the height of it's parent.
In this example the html,body has a height of 100% and the percentage of each div child is then relative to it's parent. Note how each div is half the size of it's parent div, each step it shrinks by half the size.
Updated with all percentage example
Simple example
HTML
<div>
<div>
<div>
<div></div>
</div>
</div>
</div>
CSS
html, body {
height: 100%;
}
div {
height: 100%;
background: #F00;
}
div div {
background: #FF0;
height: 50%;
}
div div div {
background: #000;
height: 50%;
}
div div div div {
background: #F30;
height: 50%;
}
First of all write height in inline style
<div id="Div4" height:100%;"></div>
change to
<div id="Div4" style="height:100%;"></div>
The key is to set the height of the div with id "Div1" to something other than "auto". Try 100% or a specific value like this
<div id="Div1" style="height:100%;">
<div id="Div2" style="height:100%;">
<div id="Div3" style="min-height:100%;"></div>
<div id="Div4" height:100%;"></div>
</div>
</div>
This is a little difficult to describe, but basically there is undesired space left by a floated div on my page. Here are pictures describing the problem. The black boxes are divs.
Before floating:
After floating:
Desired effect:
And I'm not sure if it makes a difference, but I also have an empty div with "clear: both" placed immediately after the floated div.
How can I achieve this?
If possible, put the float: right div before the unfloated div in the HTML.
<div class="a1">a1</div>
<div class="a2">a2</div>
.a1
{
background-color:Red;
width:200px;
height:200px;
float:left;
}
.a2
{
background-color:Green;
width:200px;
height:200px;
float:left;
}
=======try this
Remove the clearing div. Also check the padding/margin on those divs and ensure that the containing div (parent div) is wide enough to accommodate the two child divs.
The first div should have float: left set. Else the first div, which is a block element, will take up all the vertical space for itself.
HTML
<div id="container">
<div id="main">
blah blah blah blah blah
</div>
<div id="aside">
this goes to the side
</div>
<div id="clear"></div>
</div>
CSS
div#container
{
width : 80%;//your preference
height : auto;
margin : 0 auto;//Centers the page
}
div#main
{
width : 70%;
height : auto;
display : block;//to wrap it up inside its width
float : left;//float it towards left
}
div#aside
{
width : 30%;//take up rest of the width size
height : auto;
display : block;
float :right;//float towards right
}
#clear
{
clear : both;//this will do the job
}
The issue is youre only floating one div. You need to make the margin-right on the non foated div the same width as the total space (width+paddding+margin) of the floated div.
Or alternatiely you can float both divs.
Examples:
<div id="container" style="width: 410px;">
<div style="float: right; width: 200px;">
<p> Right div</p>
</div>
<div style="width: 200px; margin-right: 210px;">
<p> Left Div</p>
</div>
<div style="clear:both;"></div>
</div>
OR:
<div id="container" style="width: 410px;">
<div style="float: left; width: 200px; margin-right: 10px;">
<p> Left Div</p>
</div>
<div style="float: left; width: 200px;">
<p> Right div</p>
</div>
<div style="clear:both;"></div>
</div>
Both divs should float left and make sure they equal or are less than the width of the container they are in.
If a1 is to appear floated to the right of a2, then you have to put a1 FIRST in the html, and float it right. A bit counter intuitive, but its how floats work.
<div class="container">
<div class="a1">a1</div>
<div class="a2">a2</div>
</div>
<style>
div
{
border: solid 2px #000;
background-color: #eee;
}
.a1
{
background-color:Red;
width:200px;
height:200px;
float:right; /* the trick is, a1 appears BEFORE a2 in the html, yet
we are floating a1 right . if you do it the other way around
( try and float a2 ) then it will work like you showed
(separate line)*/
}
.a2
{
background-color:Green;
width:200px;
height:200px;
/* don't float this one */
}
</style>
There's a white space issue with floats. That's why the second box is slightly lower.
<div style="float:left">a1</div><div style="float:left">a2</div>
will work.
<div style="float:left">a1</div>
<div style="float:left">a2</div>
won't work