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/
Related
I have a section inside width: 1180px; i want to extend this green color div I want to make width: 100% I have tried using vw but not getting but some extra space is coming. can anyone suggest me? Is there any other way to do using CSS.
.wrapper {
width: 100%;
position: relative;
background: #ccc;
}
.inner {
width: 1180px;
margin: 0 auto;
background: pink;
}
.box1 {
height: 50px;
background: red;
}
.box2 {
height: 50px;
background: green;
margin-left: calc(-100vw/2 + 100%/2);
margin-right: calc(-100vw/2 + 100%/2);
width: 100vw;
}
<div class="wrapper">
<div class="inner">
<div class="box1"></div>
<div class="box2"></div>
</div>
</div>
You need to reset the margin using media query. Initially you have a negative margin but after 1180px it will be a positive one creating the unwanted space. You also don't need to set width using vw unit. Keeping the default width is enough:
.wrapper {
width: 100%;
position: relative;
background: #ccc;
}
.inner {
width: 1180px;
margin: 0 auto;
background: pink;
}
.box1 {
height: 50px;
background: red;
}
.box2 {
height: 50px;
background: green;
margin-left: calc(-100vw/2 + 100%/2);
margin-right: calc(-100vw/2 + 100%/2);
}
#media all and (max-width:1180px) {
.box2 {
margin:0;
}
}
<div class="wrapper">
<div class="inner">
<div class="box1"></div>
<div class="box2"></div>
</div>
</div>
You could use negative margin - the only problem with this approach is that if the page gets a vertical scroll, this will add a horizontal scroll as 100vw doesn't take into account the 20px caused by the vertical scroll:
body {
margin: 0;
}
.wrapper {
width: 100%;
position: relative;
background: #ccc;
}
.inner {
width: 1180px;
margin: 0 auto;
background: pink;
}
.box1 {
height: 50px;
background: red;
}
.box2 {
height: 50px;
background: green;
width: 100%;
}
#media screen and (min-width:1180px) {
.box2 {
margin: 0 calc(((100vw - 1180px) / 2) * -1);
width: auto;
}
}
<div class="wrapper">
<div class="inner">
<div class="box1"></div>
<div class="box2"></div>
</div>
</div>
As I say in my comments, it would be better to just move the green div outside your wrapper
.wrapper {
width: 100%;
position: relative;
background: #ccc;
}
.inner {
width: 1180px;
margin: 0 auto;
}
.box1 {
height: 50px;
background: red;
}
.box2 {
height: 50px;
background: green;
}
<div class="wrapper">
<div class="inner">
<div class="box1"></div>
<div class="box2"></div>
</div>
</div>
Try this:
.wrapper {
width: 100%;
position: relative;
background: #ccc;
}
.inner {
width: 1180px;
margin: 0 auto;
background: pink;
}
.box1 {
height: 50px;
background: red;
}
.box2 {
height: 50px;
background: green;
width: 100%;
}
<div class="wrapper">
<div class="inner">
<div class="box1"></div>
<div class="box2"></div>
</div>
</div>
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;
}
another newbie question here. Learning CSS. I am trying to do something that I thought would be very simple, but have not managed to find the way to do it, or a suitable answer to the question.
I have a simple project with a header, some content and a footer. The content has a div with a white border and an image inside it. I would like the div to be as wide as the image and no wider. I have provisionally set the width to 430px, but I would like to know the code to set the width to whatever the width of the image is.
Code
html
html,
body {
margin: 0px;
padding: 0px;
height: 100vh;
}
#header {
position: relative;
height: 10%;
width: 100%;
background-color: lightgray;
}
#footer {
position: relative;
height: 10%;
width: 100%;
background-color: lightgray;
}
#container {
height: 80%;
width: 100vw;
background-color: red;
}
#imagewrap {
position: relative;
border: 1px solid white;
width: 430px;
display: block;
margin: 0 auto;
top: 50%;
transform: translateY(-50%);
}
<div id="header"> </div>
<div id="container">
<div id="imagewrap">
<img src="Images/01Folder/Image.jpg" height="100%" id="front" />
</div>
</div>
<div id="footer"> </div>
Add display: inline-block; to your .imagewrap without setting it's width.
.imagewrap {
display: inline-block;
}
If you want a div with an image to be centered, add another div around them with:
.wrapper {
display: flex;
justify-content: center;
align-items: center;
}
But do you really need that div around an image? The border might be added to an image itself without additional div.
If you want a border on the image, add it there
html,
body {
margin: 0px;
padding: 0px;
height: 100vh;
}
#header {
position: relative;
height: 10%;
width: 100%;
background-color: lightgray;
}
#footer {
position: relative;
height: 10%;
width: 100%;
background-color: lightgray;
}
#container {
height: 80%;
width: 100vw;
background-color: red;
}
#imagewrap {
position: relative;
/*border: 1px solid white;
width: 430px;
display: inline-block;
line-height: 0;
margin: 0 auto;*/
top: 50%;
transform: translateY(-50%);
text-align: center; /*center image horizontally*/
}
#imagewrap img {
border: 1px solid white;
}
<div id="header"> </div>
<div id="container">
<div id="imagewrap">
<img src="https://unsplash.it/100/100" height="100%" id="front" />
</div>
</div>
<div id="footer"> </div>
Check out this fidde:
https://jsfiddle.net/56myv9g2/1/
#imagewrap img{
display:block;
}
#imagewrap{
position: relative;
border: 1px solid white;
display: inline-block;
margin: 0 auto;
top: 50%;
transform: translateY(-50%);
}
#container {
height: 80%;
width: 100vw;
text-align:center;
background-color: red;
}
Also, you could just give the border to the image tag all along without the div
If you set display: inline-block, then you need to add text-align: center to container
html,
body {
margin: 0px;
padding: 0px;
height: 100vh;
}
#header {
position: relative;
height: 10%;
width: 100%;
background-color: lightgray;
}
#footer {
position: relative;
height: 10%;
width: 100%;
background-color: lightgray;
}
#container {
text-align: center;
height: 80%;
width: 100vw;
background-color: red;
}
#imagewrap{
position: relative;
border: 1px solid white;
width: 430px;
display: inline-block;
top: 50%;
transform: translateY(-50%);
}
<div id="header"> </div>
<div id="container">
<div id="imagewrap">
<img src="Images/01Folder/Image.jpg" height="100%" id="front" />
</div>
</div>
<div id="footer"> </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/