So I have 3 divs side by side inside the div element and another div after them. However, this div is overlapping the others. How can I make "footer" come after "main"?
.main {
height: 500px;
width: 100%;
position: absolute;
}
.filter {
background: red;
height: 100%;
float: left;
width: 20%;
}
.post-bar {
background: blue;
height: 100%;
float: left;
width: 60%;
}
.advertisment {
background: green;
height: 100%;
float: left;
width: 20%;
}
.footer {
height: 250px;
width: 100%;
background: black;
position: relative;
}
<div class="main">
<div class="filter">
</div>
<div class="post-bar">
</div>
<div class="advertisment">
</div>
</div>
<div class="footer"></div>
Just get rid off position:absolute in your main class:
.main {
height: 500px;
width: 100%;
}
.filter {
background: red;
height: 100%;
float: left;
width: 20%;
}
.post-bar {
background: blue;
height: 100%;
float: left;
width: 60%;
}
.advertisment {
background: green;
height: 100%;
float: left;
width: 20%;
}
.footer {
height: 250px;
width: 100%;
background: black;
position: relative;
}
<div class="main">
<div class="filter">
</div>
<div class="post-bar">
</div>
<div class="advertisment">
</div>
</div>
<div class="footer"></div>
Just remove the
position: absolute;
display: block;
from
.main
I think you will find your desired result. Please , inform if there are any other issues. Thank you.
Remove positions from main and footer.
.main {
height: 500px;
width: 100%;
float:left;
}
.footer {
height: 250px;
width: 100%;
background: black;
float:left;
}
Related
How do I make the image responsive and keep it in between the containers left and right.
I have tried putting it all into another container and it doesn’t work.
I know it sounds basic but it really is not.
body {
background-color: black;
}
.left {
background-color: red;
width: 150px;
height: 800px;
float: left;
}
.right {
background-color: green;
width: 150px;
height: 800px;
float: right;
}
img {
display: block;
margin-left: auto;
margin-right: auto;
}
<div class="left"></div>
<div class="right"></div>
<img src="paintingOg.gif" style="width:50%">
How about this way? Is it (close to) what you need? Please check responsiveness too.
body {
background-color: black;
}
.left {
background-color: red;
width: 150px;
height: 800px;
float: left;
}
.right {
background-color: green;
width: 150px;
height: 800px;
float: right;
}
.center {
height: 800px;
background-color: blue;
overflow: auto;
text-align: center;
}
img {
max-width: 100%;
height: auto;
}
<div class="left"></div>
<div class="right"></div>
<div class="center">
<img src="https://picsum.photos/500/500?gravity=west">
</div>
You don't need containers to center something.
It's better to use 1 container that contains everything.
If you want to center your image into a div just use this code:
<div align="center">
<image src="whatever.png"/>
</div>
body {
background-color: black;
}
.left {
background-color: red;
width: 150px;
height: 800px;
float: left;
}
.right {
background-color: green;
width: 150px;
height: 800px;
float: right;
}
img {
width: 100%;
height: auto;
}
<div class="left"></div>
<div class="right"></div>
<div align="center">
<img src="paintingOg.gif" />
</div>
I created three columns spread across 90% of the width page width and also centred on the page using "margin: auto". I wanted to have the three columns of equal width with equal spacing in between but was unable to achieve my desired result. How would I ago about doing this?
html, body {
width: 100%;
height: 100%;
margin: 0px;
background-color: #fbe3cf;
}
.ColumnContainer {
height: 100%;
width: 90%;
margin: auto;
}
.c1 {
float: left;
width: 30%;
height: 70%;
background-color: green;
}
.c2 {
float: right;
width: 30%;
height: 70%;
background-color: #DDDDDD;
}
.c3{
float: right;
width: 30%;
height: 70%;
background-color: yellow;
}
<div class="ColumnContainer">
<div class="c1">c1</div>
<div class="c3">c3</div>
<div class="c2">c2</div>
</div>
You can use flex box to easily achieve this, here is the css for the desired result which also keeps it fully responsive.
here is a more detailed explanation on flex box and what you can achieve
html, body {
width: 100%;
height: 100%;
margin: 0px;
background-color: #fbe3cf;
}
.ColumnContainer {
height: 100%;
width: 90%;
margin: auto;
display:flex;
justify-content:space-between;
}
.c1 {
width: 30%;
height: 70%;
background-color: green;
}
.c2 {
width: 30%;
height: 70%;
background-color: #DDDDDD;
}
.c3{
width: 30%;
height: 70%;
background-color: yellow;
}
<div class="ColumnContainer">
<div class="c1">c1</div>
<div class="c3">c3</div>
<div class="c2">c2</div>
</div>
You can remove float and make them as inline-block, and then center the elements present in the ColumnContainer.
html, body {
width: 100%;
height: 100%;
margin: 0px;
background-color: #fbe3cf;
}
.ColumnContainer {
height: 100%;
width: 90%;
margin: auto;
text-align: center;
}
.ColumnContainer > div{
display:inline-block;
width:30%;
}
.c1 {
height: 70%;
background-color: green;
}
.c2 {
height: 70%;
background-color: #DDDDDD;
}
.c3{
height: 70%;
background-color: yellow;
}
<div class="ColumnContainer">
<div class="c1">c1</div>
<div class="c3">c3</div>
<div class="c2">c2</div>
</div>
Divs inside Div (id="icons") not starting new line (like Windows 7 icons)
I want the divs inside div with id="icons" don't start a new line it flows vertically. Why not start new line?
JsFiddle
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
body {
margin:0;
padding:0;
}
#icons {
position: fixed;
background: red;
width: 100%;
height: 100%;
overflow: auto;
}
#icons1 {
position: relative;
background: blue;
width: 20%;
height: 25%;
}
#icons2 {
position: relative;
background: yellow;
width: 20%;
height: 25%;
}
#icons3 {
position: relative;
background: lime;
width: 20%;
height: 25%;
}
#icons4 {
position: relative;
background: pink;
width: 20%;
height: 25%;
}
#icons5 {
position: relative;
background: purple;
width: 20%;
height: 25%;
}
#icons6 {
position: relative;
background: blue;
width: 20%;
height: 25%;
}
#icons7 {
position: relative;
background: yellow;
width: 20%;
height: 25%;
}
#icons8 {
position: relative;
background: lime;
width: 20%;
height: 25%;
}
#icons9 {
position: relative;
background: pink;
width: 20%;
height: 25%;
}
#icons10 {
position: relative;
background: purple;
width: 20%;
height: 25%;
}
<div id="desktop">
<div id="icons">
<div id="icons1"></div>
<div id="icons2"></div>
<div id="icons3"></div>
<div id="icons4"></div>
<div id="icons5"></div>
<div id="icons6"></div>
<div id="icons7"></div>
<div id="icons8"></div>
<div id="icons9"></div>
<div id="icons10"></div>
<div id="icons1"></div>
<div id="icons2"></div>
<div id="icons3"></div>
<div id="icons4"></div>
<div id="icons5"></div>
<div id="icons6"></div>
<div id="icons7"></div>
<div id="icons8"></div>
<div id="icons9"></div>
<div id="icons10"></div>
</div>
</div>
A DIV by default is a display type of 'block' and therefore forces in the line break.
You can get around this by using display: inline-block; in your CSS like so:
#icons1 {
position: relative;
background: blue;
width: 20%;
height: 25%;
display: inline-block;
}
#icons2 {
position: relative;
background: blue;
width: 20%;
height: 25%;
display: inline-block;
}
/* etc */
You can add this in at the higher level (Icons) but if you're trying to do Windows style then you probably want more control over what and where breaks occur.
(hopefully I interpreted your question correctly!)
Change the display type on those icon divs.
#icons div {
display:inline-block;
margin:5px;
}
http://jsfiddle.net/0y7ktkd2/1/
How do I align div to the bottom of another div in HTML?
And why it doesn't work?
HTML:
<div id="big">
<div class="small">1</div>
<div class="small">2</div>
<div class="small">3</div>
</div>
CSS:
#big {
background-color: red;
margin: 10px;
}
.small {
width: 150px;
height: 150px;
background-color: blue;
float: left;
display: inline-block;
position: absolute;
bottom: 0px;
margin: 10px;
display: inline-block;
}
Your question is unclear but do you mean like this?..
#big {
display:table-cell;
position:relative;
vertical-align:bottom;
background-color: red; margin: 10px; width: 800px; height: 300px;
}
.small {
display: inline-block;
width: 150px; height: 150px; background-color: blue;
margin: 10px;
}
<div id="big">
<div class="small">1</div>
<div class="small">2</div>
<div class="small">3</div>
</div>
This will work:
http://jsfiddle.net/4f4ejwr0/5/
#big {
background-color: red;
margin: 10px;
position: relative;
height: 300px;
}
#bottom {
position: absolute;
bottom: 0px;
margin: 10px;
}
.small {
width: 150px;
height: 150px;
background-color: blue;
float: left;
margin-left: 10px;
}
<div id="big">
<div id="bottom">
<div class="small">1</div>
<div class="small">2</div>
<div class="small">3</div>
</div>
</div>
is this what youre looking for? http://jsfiddle.net/swm53ran/94/
should be changed to
position: relative;
Add the following to your CSS Class:
bottom:0 !important;
and remove the position portion.
Try this
#big {
background-color: red;
margin: 10px;
width: 150px; //new line
}
.small {
width: 150px;
height: 150px;
background-color: blue;
float: left;
position: relative; // new line
margin: 10px;
}
Live jsfiddle
Update: This is ok ? Jsfiddle
I found this solution to centering my div vertically and horizontally. However if I fill in the content section past the length defined for the div it will run outside of it. I was hoping to make it expand depending on the content inside the div. How do I make it so this can happen?
JSFIDDLE
HTML:
<body>
<div id="wrapper">
<div id="headerwrapper">
<div id="header" class="center">header</div>
</div>
<div id="titlewrapper">
<div id="title" class="center">title</div>
</div>
<div id="contentwrapper">
<div id="content" class="center">content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br></div>
</div>
<div id="footerwrapper">
<div id="locationwrapper">
<div id="location" class="center">location</div>
</div>
<div id="copyrightwrapper">
<div id="copyright" class="center">copyright</div>
</div>
</div>
</div>
</body>
CSS:
html body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
.center {
position: relative;
top: 50%;
transform: translateY(-50%);
margin-right: auto;
margin-left: auto;
width: 100%;
height: 100%
max-width: 5em;
}
#wrapper {
background-color: pink;
height: 100%;
width: 100%;
}
#headerwrapper {
background-color: green;
width: 100%;
height: 8em;
}
#header {
color: white;
background-color: black;
}
#titlewrapper {
background-color: red;
width: 100%;
height: 8em;
}
#title {
color: white;
background-color: black;
}
#contentwrapper {
background-color: blue;
width: 100%;
height: 8em;
}
#content {
color: white;
background-color: black;
}
#locationwrapper {
background-color: yellow;
width: 100%;
height: 8em;
}
#location {
color: white;
background-color: black;
}
#footerwrapper {
background-color: brown;
width: 100%;
height: 100%;
}
#copyrightwrapper {
background-color: green;
width: 100%;
height: 8em;
}
#copyright {
color: white;
background-color: black;
}
If you want the "content" sections to dynamically adjust height, take off the fixed height.
Change:
#contentwrapper {
background-color: blue;
width: 100%;
height: 8em;
}
To:
#contentwrapper {
background-color: blue;
width: 100%;
}
Working fiddle to your requirement: http://jsfiddle.net/k5YUu/6/