How do I center align 3 floating divs inside each other centered on page ?
<div style="width:100%">
<div style="width:90%">
<div style="width:80%">
//Content
</div>
</div>
</div>
Use margin: auto in CSS.
<div style="background-color: red; height: 100px; width: 500px; margin: auto;">
<div style="background-color: green; height: 100px; width: 300px; margin: auto;">
<div style="background-color: blue; height: 100px; width: 100px; margin: auto;">
//Content
</div>
</div>
</div>
If the element you're centering has a specified width, you can center it with margin: 0 auto
Related
I have a JS Fiddle here.
https://jsfiddle.net/h3c6jqfy/
Basically, i am trying to make a UI that has a sticky header and footer. The middle content will have three columns. Each columns will have DIVs in them. These DIVs should have 100% height and not be cut off from the footer. Within the DIV, they will have scrollable divs.
The very basic layout I created has this in it...
d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>this is the end!!
The part where it says this is the end!! is never reached.
You can use flexbox without the need to calculate heights;
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
::before,
::after {
box-sizing: inherit;
}
body {
display: flex;
flex-direction: column;
height: 100vh;
}
header {
height: 75px;
background: red;
}
main {
flex: 1;
background: lightgreen;
display: flex;
}
.scrolly {
flex: 1 0 33%;
overflow-y: auto;
}
.content {
height: 1000px;
}
footer {
height: 50px;
background: blue;
}
<header></header>
<main>
<div class="scrolly">
<div class="content"></div>
</div>
<div class="scrolly">
<div class="content"></div>
</div>
</div>
<div class="scrolly">
<div class="content"></div>
</div>
</div>
</main>
<footer></footer>
NOTE: See Fiddle in Full Screen
You can try using flexbox instead of defining every unit, calculate the height to avoid using the space where the footer sits, and let the children div inherit its height
<style>
body, head {overflow: hidden;}
#header,#footer,#content { position:absolute; right:0;left:0;}
#header{
height:100px; top:0; background: #4A4A4A;
}
#footer{
height:100px; bottom:0; background: #4A4A4A;
}
#content{
top:100px;
height: calc(100% - 100px);
background:#fff;
display: flex;
align-items: stretch;
}
</style>
<div>
<div id="header">HEADER</div>
<div id="content">
<div style="background-color: #ff0000; min-width: 33%; height: inherit; overflow-y: scroll;">
<div style="background-color: blue;min-height: inherit;max-width: 99%;padding: 20px 40px;">
<div style="overflow: auto; max-height: inherit; padding: 10px;">
<br>d<br>d<br>d<br>d<br>d<br>d<br>d
<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>
d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>
d<br>d<br>d<br>d<br><br>d<br>d<br>d<br>d<br>
d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>
d<br>d<br>d
<br>d<br>this is the end!!
</div>
</div>
</div>
<div style="background-color: #ff0000; min-height: 100%; min-width: 33%; max-width: 33%;float: left;">
<div style="background-color: red;min-height: 100%;max-width: 99%;padding: 20px 40px;">
middle
</div>
</div>
<div style="background-color: #ff0000; min-height: 100%; min-width: 33%; max-width: 33%;float: left;">
<div style="background-color: pink;min-height: 100%;max-width: 99%;padding: 20px 40px;">
right
</div>
</div>
</div>
<div id="footer">FOOTER</div>
</div>
This should be simple for you CSS gurus, but I really can't get this going. There are 4 boxes, example code:
<div id="wrapper">
<div id="firstPair">
<div style="width: 200px; float: left"></div>
<div style="width: 200px; float: left"></div>
</div>
<div id="secondPair">
<div style="width: 200px; float: left"></div>
<div style="width: 200px; float: left"></div>
</div>
</div>
When the window width is less than 800 only the rightmost div is moved, leaving them with 3 on top, and 1 on the next row.
I want the second two to go down the page as a pair. 2 on top, 2 on bottom, even if there is space for 3 next to eachother.
You need to set style for firstPair and secondPair elements
div[id$="Pair"] {
display: inline-block;
float: left;
}
<div id="wrapper">
<div id="firstPair">
<div style="width: 200px; float: left">s</div>
<div style="width: 200px; float: left">d</div>
</div>
<div id="secondPair">
<div style="width: 200px; float: left">f</div>
<div style="width: 200px; float: left">g</div>
</div>
</div>
And one more solution with shorten html, but some more use css
div[id$="Pair"] {
display: inline-block;
}
[id$="Pair"] > div {
width: 200px;
float: left;
background: lightgreen;
}
#wrapper {
text-align: center;
}
<div id="wrapper">
<div id="firstPair">
<div>s</div>
<div>d</div>
</div>
<div id="secondPair">
<div>f</div>
<div>g</div>
</div>
</div>
div[id$="Pair"] {
display: inline-block;
margin: 0;
}
[id$="Pair"] > div {
display: inline-block;
width: 200px;
margin: 2px 0;
background: lightgreen;
}
#wrapper {
text-align: center;
}
<div id="wrapper">
<div id="firstPair">
<div>1</div>
<div>2</div>
</div>
<div id="secondPair">
<div>3</div>
<div>4</div>
</div>
</div>
It is about BFC.
You might also float the containers :
#wrapper> div {
float:left;
}
<div id="wrapper">
<div id="firstPair">
<div style="width: 200px; float: left">1</div>
<div style="width: 200px; float: left">2</div>
</div>
<div id="secondPair">
<div style="width: 200px; float: left">3</div>
<div style="width: 200px; float: left">4</div>
</div>
</div>
Here's my solution. I tend to work in a fully responsive environment, so this will position them and be fully responsive on mobile. I also isolated the css, the inline colors are just for demo.
<style>
div#firstPair {
width: 100%;
max-width:400px;
float: left;
}
div#firstPair div{
width: 50%;
float: left;
}
div#secondPair {
width: 100%;
max-width: 400px;
float: left;
}
div#secondPair div{
width: 50%;
float: left;
}
</style>
<div id="wrapper">
<div id="firstPair">
<div style="background-color: blue;">first_1</div>
<div style="background-color: green;">first_2</div>
</div>
<div id="secondPair">
<div style="background-color: red;">second_1</div>
<div style="background-color: orange;">second_2</div>
</div>
<div style="clear: both;"></div>
</div>
I have div as below:
<div id="divObservationInput" style="height: 55%; vertical-align: text-bottom;" class="sloInputBox">
<div id="divEnlargeTextarea" style="height: 97%; width: 99%">
<textarea onkeyup="txtobservationbox_onTextChanged();return false;" name="txtobservationbox" id="txtobservationbox" style="height: 100%; width: 100%; overflow: auto; font-size: 12pt;">#ViewBag.ObserverText</textarea>
</div>
</div>
And button div as:
<div id="DivShowInModal" style="background: rgba(0,0,0,0.8);">
<div>
<div style="padding-top: 1%; text-align: right; position: relative; width: 80%; height:2%">
<button onclick="CloseShowInModal()" class="buttoncss">Close</button>
</div>
<div id="divModal" style="max-height: 500px; min-height: 500px;">
</div>
</div>
</div>
Its looking:
I want to shoft that close button to extreem right of div.
i.e. It should be extreem right to textarea.
Please help me.
I tried button setting its right padding to 100%.
But it didnt helped.
Change your '80%' 'width' to '100%' for this 'div'
<div style="padding-top: 1%; text-align: right; position: relative; width: 100%; height:2%">
<button onclick="CloseShowInModal()" class="buttoncss">Close</button>
</div>
I guess you have to do
in HTML
<div class="relative">
<div class="button">
<button onclick="CloseShowInModal()" class="buttoncss">Close</button>
</div>
<div id="divModal" style="max-height: 500px; min-height: 500px;">
</div>
</div>
In CSS
.relative { position: relative; } .button { position: absolute; top: 0; right: 0; }
use this code n try once
<div id="DivShowInModal" style="background: rgba(0,0,0,0.8);">
<div style="position:relative">
<div style="padding-top: 1%; text-align: right; position: absolute; width: 80%; height:2%;right:0">
<button onclick="CloseShowInModal()" class="buttoncss">Close</button>
</div>
<div id="divModal" style="max-height: 500px; min-height: 500px;">
</div>
</div>
</div>
i have scaled it by position:absolute and right:0
You can use position absolute with right 0 for button. For that you need to give position relative for it's parent div.
[Demo](http://jsfiddle.net/Rj3Mh/)
can you please help me with some css magic.
I am trying to achieve a flixable multi column layout. something like this http://masonry.desandro.com/demos/basic-multi-column.html can I achive this with Blueprint and no javascript.
the thing with blueprint now is that is added lots of white space (see attachment)
Following is just sample one.. You just change width/height according to your requirement. Hope this helps.
CSS
----
.content {
float: left;
display: block;
width: 1000px;
background: red;
}
.sub-content {
float:left;
width: 200px;
background: blue;
margin: 10px;
}
Sample HTML
-----------
<div class="content">
<div class="sub-content" style="width: 500px; height: 300px;">
DIV 1
</div>
<div class="sub-content" style="width: 200px; height: 100px;">
DIV 2
</div>
<div class="sub-content" style="width: 500px; height: 300px;">
DIV 3
</div>
<div class="sub-content" style="width: 250px; height: 300px;">
DIV 4
</div>
</div>
a have three column layout and i want to have three divs inside the middle column, but every time my content in sidebars is "longer" than content in the middle div, boxes just jump down under "the longest div". Here is my code:
<div style="float: left; width: 15%; background-color: yellow;">
<p>left</p>
<p>left</p>
<p>left</p>
</div>
<div style="float: right; width: 15%; background-color: pink;">
<p>right</p>
<p>right</p>
<p>right</p>
<p>right</p>
</div>
<div style="margin-left: 20%; margin-right: 20%;">
<div style="float: left; width: 20%; background-color: blue; margin: 1%">
middle
</div>
<div style="float: left; width: 20%; background-color: blue; margin: 1%">
middle
</div>
<div style="float: left; width: 20%; background-color: blue; margin: 1%">
middle
</div>
<div style="clear: both;"></div>
<div style="float: left; width: 20%; background-color: blue; margin: 1%">
middle
</div>
<div style="float: left; width: 20%; background-color: blue; margin: 1%">
middle
</div>
<div style="float: left; width: 20%; background-color: blue; margin: 1%">
middle
</div>
<div style="clear: both;"></div>
<div style="float: left; width: 20%; background-color: blue; margin: 1%">
middle
</div>
<div style="float: left; width: 20%; background-color: blue; margin: 1%">
middle
</div>
<div style="float: left; width: 20%; background-color: blue; margin: 1%">
middle
</div>
Here is code on jsfiddle for better understanding. I would be glad if somebody could explain "clearing" to me.
Edit:
I followed this tutorial http://css.maxdesign.com.au/floatutorial/tutorial0406.htm
Your middle div is being presented as a block level element and is why is being pushed along with the content of your sidebar divs. Float it to the left and add a proper width to it to fix the issue. Middle div width = 20% + 20% margin + 15% + 15% sidebar widths = 70% + 30% middle div = 100%.
http://jsfiddle.net/DyHGP/5/
It's because of the following, which you have after every three divs.
<div style="clear: both;"></div>
Clearing is used to drop an elementy right under anything that is float. Using clear: both; means that it will clear anything that is floated left or right.
A quick fix would be to remove those elements and increase the width of each of the divs in the centre column to 30% which would then force the 4th one onto the next line.