I have few child div that will be created inside parent div , because I want the child div to be dropped to the bottom. I use css to force the child div to drop to the bottom, however I also want if several child div
are created, they will displayed in row by row, but currently the outcome is no matter how many child div are created, they are displayed in same line. How can I make the child div displayed row by row? Here is my css.
.myProgress {
position: relative;
display:flex;
width: 100%;
height: 30px;
margin-top: auto;
margin-bottom:150px;
background-color: #ddd;
}
.myBar {
position: relative;
width: 1%;
height: 100%;
margin-top: auto;
background-color: #4CAF50;
}
.nav {
float: left;
display:flex;
width: 40%;
margin: 0;
padding: 1px;
}
<div class="nav">
<div id="myProgress" class="myProgress" style="width:350px;">
<div id="div01" class="myBar" style="width: 100%;"></div>
<div id="div02" class="myBar" style="width: 100%;"></div>
<div id="div03" class="myBar" style="width: 100%;"></div>
</div>
</div>
And here is the outcome of three div, they drop to the the same row, I thought it should be caused by force of put into bottom css. Is there a way that I can put into the bottom but displayed row by row ,e.g. if three child div then display three row?
You're using display:flex; on .myProgress
If you also add flex-direction: column; to .myProgress then it will add each div underneath the last one.
JS Fiddle
More info on Flexbox
Use this css,
.myProgress {
/* position: relative;
display:flex;*/
width: 100%;
height: 30px;
margin-top: auto;
margin-bottom:150px;
background-color: #ddd;
}
.myBar {
/* position: relative;*/
width: 100%;
height: 100%;
margin-top: auto;
background-color: #4CAF50;
float:left;
}
.nav {
float: left;
display:flex;
width: 40%;
margin: 0;
padding: 1px;
}
Related
I am having trouble centering content of one div inside of another because the content doesn't appear.
#searchbkg {
postition: relative;
width: 100%;
height: 700px;
background-color: #85e085;
}
#searchcentre {
position: absolute;
width: 50%;
margin: 0 auto;
}
<div id="searchbkg">
<div id="searchcentre">Test</div>
</div>
The green box appears but there is no text inside of it.
Your text is appearing fine, but it won't be centered because you have position: absolute; on the inside div. Change it to position: relative; and it will center horizontally. If you need the text to be centered within the div, you can also apply a text-align: center;.
#searchbkg {
position: relative;
width: 100%;
height: 700px;
background-color: #85e085;
}
#searchcentre {
position: relative;
width: 50%;
margin: 0 auto;
text-align: center;
border: 1px solid red;
}
<div id="searchbkg">
<div id="searchcentre">This is a centered div!</div>
</div>
You need to make following 3 changes to make your content in center;
You have typo in one css property inside styles of #searchbkg. There is postition while it should be position.
Remove position: absolute from #searchcentre if not needed (Absolute positioning should be used only if you wants to place one element over another).
Add text-align: center in #searchcentre.
#searchbkg{
position: relative;
width: 100%;
height: 700px;
background-color: #85e085;
}
#searchcentre{
text-align: center;
background: orange;
width: 50%;
margin: 0 auto;
}
<div id="searchbkg">
<div id="searchcentre">Test</div>
</div>
try this:
#searchbkg{
postition: relative;
width: 100%;
height: 700px;
background-color: #85e085;
text-align:center;
}
#searchcentre{
display: inline-block;
width: 50%;
}
<div id="searchbkg">
<div id="searchcentre">Test</div>
</div>
I have a parent div that contains a child div. I want the parent div to resize automatically so the child is always inside the parent's borders. Right now the bottom of the child div is extending beyond the bottom of the parent because of relative positioning. How do I get the parent resize?
#parentDiv {
margin: 40px 0 0 40px;
background-color: #eae;
width: 1500px;
height: auto;
}
#childDiv {
position: relative;
max-width: 400px;
min-height: 200px;
background-color: #B9D7D9;
top: 20px;
left: 20px;
}
<div id="parentDiv">
<div id="childDiv">
</div>
</div>
Relative positioning moves the element visually so if you want to contain it within the parent you'll need another method to move the child element.
Margin would seem to be the most obvious choice
#parentDiv {
background-color: #eae;
width: 500px;
margin: 40px;
overflow: auto;
}
#childDiv {
position: relative;
max-width: 400px;
min-height: 200px;
background-color: #B9D7D9;
margin-top: 20px;
margin-left: 20px;
<div id="parentDiv">
<div id="childDiv"></div>
</div>
Got rid of the positioning of the childDiv.
Outlined the elements so you can see them clearly.
Since there's min and max dimensions, I put 100% height and width for explicit measurements.
body {
height: 100vh;
width: 100vw;
}
#parentDiv {
margin: 40px 0 0 40px;
background-color: #eae;
width: 1500px;
outline: 2px dashed blue;
}
#childDiv {
max-width: 400px;
width: 100%;
min-height: 200px;
height: 100%;
background-color: #B9D7D9;
outline: 2px solid red;
}
<div id="parentDiv">
<div id="childDiv">
</div>
</div>
I have an element in an HTML page with child elements
<div id="parent">
<div class="child01"></div>
<div class="child01"></div>
<div class="child02"></div>
</div>
I have an example with current css at http://jsfiddle.net/exu76qnx/
and I would like to know how to have the child divs align to the bottom of the parent div (without using the absolute position answer I've found online and I would like to keep the float attribute if possible)
I've tried using verticle-align: bottom and positioning elements with a table (which worked) however they would not work for dynamically adding more child elements to the parent div
OPTION 1: You could add a wrapper around these these children which is positioned absolutely.
You can then continue to use floats inside that wrapper.
/*APPEARANCE*/
#parent {
width: 80%;
margin: 0 auto;
height: 100px;
background-color: #BBBBBB;
position: relative;
}
.wrapper {
overflow: hidden;
position: absolute;
bottom: 0;
width: 100%;
background: lightblue;
}
.child01 {
width: 70px;
height: 70px;
background-color: #888888;
}
.child02 {
width: 50px;
height: 30px;
background-color: #888888;
}
/*POSITIONING*/
.child01 {
margin-right: 20px;
float: left;
}
.child02 {
float: right;
}
<div id="parent">
<div class="wrapper">
<div class="child01"></div>
<div class="child01"></div>
<div class="child02"></div>
</div>
</div>
OPTION 2: Alternative with Flexbox (still with wrapper)
/*APPEARANCE*/
#parent {
width: 80%;
margin: 0 auto;
height: 100px;
background-color: #BBBBBB;
position: relative;
display: flex;
flex-direction: column;
justify-content: flex-end
}
.wrapper {
overflow: hidden;
/* quick clearfix */
background: lightblue;
}
.child01 {
width: 70px;
height: 70px;
background-color: #888888;
}
.child02 {
width: 50px;
height: 30px;
background-color: #888888;
}
/*POSITIONING*/
.child01 {
margin-right: 20px;
float: left;
}
.child02 {
float: right;
}
<div id="parent">
<div class="wrapper">
<div class="child01"></div>
<div class="child01"></div>
<div class="child02"></div>
</div>
</div>
I'm still getting to grips with flexbox so it's possible this could be improved.
This might be a case of no school like the old school
I've managed to do it with tables which I wanted to avoid (but not as much as absolute positioning)
http://jsfiddle.net/tefz80jq/
<!-- parent is now a table -->
<table id="parent" cellpadding="0" cellspacing="0" border="0">
<!-- table row handles bottom alignment -->
<tr valign="bottom">
I was hoping for a solution similar to this, being able to dynamically add elements that will fall in line with existing positioning
This question already has answers here:
Why doesn't the height of a container element increase if it contains floated elements?
(7 answers)
Closed 8 years ago.
In the following scenario I do not understand why the height of the elements wrapper and content are not set correctly even though they are set to height: auto, meaning that the 2 divs with the class wrap are not displayed inside the wrapper and content divs.
I recreated the problem in this JSfiddle:
http://jsfiddle.net/202oy3k8/
The As you can see the two orange divs are not displayed inside the wrapper divs, even though the wrapper height is set to auto. What is causing this problem and how can I fix it?
HTML CODE:
<div id="wrapper">
<div id="content">
<div id="top">
</div>
<div class="dash"></div>
<p id="header">Header</p>
<div class="wrap">
</div>
<div class="wrap">
</div>
</div>
</div
CSS CODE:
html, body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
#wrapper {
background-color: black;
margin-top: 2%;
width: 100%;
height: auto;
}
#content {
background-color: green;
width: 1224px;
height: auto;
margin: auto;
text-align: center;
}
#top {
background-color: pink;
height: 400px;
width: 60%;
margin: auto;
}
.dash {
width: 80%;
margin: auto;
margin-bottom: 1%;
height: 2px;
background-color: black;
}
p#header {
margin: 0;
text-align: center;
}
.wrap {
background-color: orange;
margin: 1%;
float:left;
width: 48%;
height: 400px;
}
You have to add a clear property to clear left float you have applied to .wrap divs.
What are float and clear for?
If you look in a typical magazine you’ll see images illustrating the
articles, with the text flowing around them. The float property in CSS
was created to allow this style of layout on web pages. Floating an
image—or any other element for that matter—pushes it to one side and
lets the text flow on the other side. Clearing a floated element means
pushing it down, if necessary, to prevent it from appearing next to
the float. Although floating was intended for use with any elements,
designers most commmonly use it to achieve multi-column layouts
without having to abuse table markup.
html,
body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
#wrapper {
background-color: black;
margin-top: 2%;
width: 100%;
height: auto;
}
#content {
background-color: green;
width: 400px;
height: auto;
margin: auto;
text-align: center;
}
#top {
background-color: pink;
height: 400px;
width: 60%;
margin: auto;
}
.dash {
width: 80%;
margin: auto;
margin-bottom: 1%;
height: 2px;
background-color: black;
}
p#header {
margin: 0;
text-align: center;
}
.wrap {
background-color: orange;
margin: 1%;
float: left;
width: 48%;
height: 400px;
}
.clear {
clear: left;
}
<div id="wrapper">
<div id="content">
<div id="top"></div>
<div class="dash"></div>
<p id="header">Header</p>
<div class="wrap"></div>
<div class="wrap"></div>
<div class="clear"></div>
</div>
</div
Reference: w3.org - Floats and clearing - CSS-Tricks - What is "Float"?
Issue: I am trying to make a layout with a fixed header for nag and below that will be an image that will fit the page. below that I want divs for content. the problem I am facing is that I cannot get both the image and the content divs to fit the screen and stack vertically.
The IMG is set to absolute because its the only way I could get it to 100% fit the screen without adjusting the margins. however when I do this the divs below that I am going to use for content: .body2 and .body3 do not show.
I want to get everything flush with the screen of the browser and stacked properly.
HTML:
<header>
<div id="headernav">
</div>
</header>
<div id="FixedBKG">
<img src="Images/imgbkg.JPG" id="bkgimg"/>
<div id="content">
<div class="body2">
</div>
</div>
<div id="content">
<div class="body3">
</div>
</div>
</div>
</body>
CSS:
#headernav {
height: 70px;
top: -10px;
left: 0px;
width: 100%;
background-color: black;
position: fixed;
z-index: 10;
color: white;
margin:0px auto;
}
#FixedBKG {
width: 100%;
height: 100%;
}
#bkgimg {
width: 100%;
left: 0px;
top: 0px;
position: absolute;
}
.body2 {
background-color: #C0C0C0;
height: 400px;
width: 100%;
left: 0px;
right: 0px;
display: block;
}
.body3 {
background-color: black;
height: 400px;
width: 100%;
left: 0px;
right: 0px;
display: block;
}
Ok, here's a second draft: FIDDLE.
General comments:
1.Try not to use positioning on a straight-forward layout like this one.
I changed the image to display: block and made it 100% of the div width - it will then adjust itself to the container, and you can
then adjust the container as you wish.
I changed the heights of the two lower divs and added a border so you could see them easier in the fiddle.
You really don't need the 100% widths, since divs are 100% by definition.
You might consider styling the body, and add a container element to give you more flexibility on formatting.
Let me know if you'd like to change anything else.
CSS
img {
display: block;
width: 100%;
}
#headernav {
height: 70px;
line-height: 70px;
text-align: center;
width: 100%;
background-color: black;
color: white;
}
#FixedBKG {
width: 100%;
}
.body2 {
background-color: #C0C0C0;
height: 200px;
width: 100%;
border: 1px solid red;
}
.body3 {
background-color: black;
height: 200px;
width: 100%;
border: 1px solid yellow;
}