I have the following html code with a div that contains 4 additional divs:
<body>
<div id="main">
<div class="one">
</div>
<div class="two">
</div>
<div class="three">
</div>
<div class="four">
</div>
</div>
</body>
How can I access the 4 divs inside and position them on the page to my liking with css?
The layout I'm going for is something like this:
I've been trying to google this but couldn't find anything helpful.
Thanks!
With the best understanding of your question, I tried to give you an answer.
section {}
.main {
float: left;
position: absolute;
width: 400px;
height: 100%;
margin: auto 13%;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.section1 {
width: 40%;
}
.section2 {
width: 40%;
}
.section1,
.section2 {
margin: 0px;
padding: 0px;
padding: 0px 5px;
float: left;
position: relative;
height: 80%;
}
.section3 {
padding: 0px;
/*border: 1px solid #cccccc;*/
float: left;
position: relative;
width: 83%;
margin: 5px 5px;
height: 20%;
}
.section1 .inner-1 {
float: left;
width: 100%;
height: 100%;
border: 1px solid #000000;
}
.section2 .inner-1 {
float: left;
width: 100%;
min-height: 30%;
border: 1px solid #000000;
}
.section2 .inner-2 {
float: left;
width: 100%;
min-height: 30%;
border: 1px solid #000000;
margin: 10px 0px 0px 0px;
}
.section3 .inner-1 {
width: 100%;
float: left;
border: 1px solid #000000;
width: 100%;
height: 50%;
}
<section class="main">
<section class="section1">
<div class="inner-1">
</div>
</section>
<section class="section2">
<div class="inner-1"></div>
<div class="inner-2"></div>
</section>
<section class="section3">
<div class="inner-1"></div>
</section>
</section>
Hope it may helpful to you.
Related
I have an HTML structure where I can't seem to get the CSS position sticky working.
I think it because it's within the aside container. If I make aside stick it works.
I want the .product-info div to be sticky and when it hits the div .content-other it unsticks.
Unless with flex I could move out .personal-info and .product-info from within the aside and have them sit to the right on top of each other? Like
content | Personal info
| Product info
Then not bother having the wrapping aside? Not sure how to stack these like this though with flex.
body {
padding: 20px;
}
.container {
margin-left: auto;
margin-right: auto;
position: relative;
padding-bottom: 16px;
padding-top: 16px;
width: 100%;
display: flex;
}
.content {
position: relative;
max-width: 100%;
flex-basis: 74%;
border: 1px solid black;
width: 300px;
margin-right: 20px;
height: 540px;
}
.right-side {
align-self: flex-start;
background-color: #ffffff;
border: 2px solid #e8e8e3;
border-radius: 0 4px 4px 4px;
flex: 1 1;
flex-basis: 40%;
min-width: 338px;
padding: 16px 16px 0;
display: block;
width: 400px;
}
.personal-info {
height: 250px;
}
.product-info {
position: sticky;
position: -webkit-sticky;
top: 24px;
border: 1px solid red;
}
.content-other {
width: 100%;
background: #f5f5f5;
height: 400px;
}
<div class="container">
<div class="content">content area here</div>
<aside class="right-side">
<div class="personal-info">some info</div>
<div class="product-info">sticky info</div>
</aside>
</div>
<div class="content-other">.product-info unsticks when it hits here</div>
Cheers
Simply remove align-self: flex-start;
body {
padding: 20px;
}
.container {
margin-left: auto;
margin-right: auto;
position: relative;
padding-bottom: 16px;
padding-top: 16px;
width: 100%;
display: flex;
}
.content {
position: relative;
max-width: 100%;
flex-basis: 74%;
border: 1px solid black;
width: 300px;
margin-right: 20px;
height: 540px;
}
.right-side {
/*align-self: flex-start;*/
background-color: #ffffff;
border: 2px solid #e8e8e3;
border-radius: 0 4px 4px 4px;
flex: 1 1;
flex-basis: 40%;
min-width: 338px;
padding: 16px 16px 0;
display: block;
width: 400px;
}
.personal-info {
height: 250px;
}
.product-info {
position: sticky;
position: -webkit-sticky;
top: 24px;
border: 1px solid red;
}
.content-other {
width: 100%;
background: #f5f5f5;
height: 400px;
}
<div class="container">
<div class="content">content area here</div>
<aside class="right-side">
<div class="personal-info">some info</div>
<div class="product-info">sticky info</div>
</aside>
</div>
<div class="content-other">.product-info unsticks when it hits here</div>
I have an HTML structure where I can't seem to get the CSS position sticky working.
I think it because it's within the aside container. If I make aside stick it works.
I want the .product-info div to be sticky and when it hits the div .content-other it unsticks.
Unless with flex I could move out .personal-info and .product-info from within the aside and have them sit to the right on top of each other? Like
content | Personal info
| Product info
Then not bother having the wrapping aside? Not sure how to stack these like this though with flex.
body {
padding: 20px;
}
.container {
margin-left: auto;
margin-right: auto;
position: relative;
padding-bottom: 16px;
padding-top: 16px;
width: 100%;
display: flex;
}
.content {
position: relative;
max-width: 100%;
flex-basis: 74%;
border: 1px solid black;
width: 300px;
margin-right: 20px;
height: 540px;
}
.right-side {
align-self: flex-start;
background-color: #ffffff;
border: 2px solid #e8e8e3;
border-radius: 0 4px 4px 4px;
flex: 1 1;
flex-basis: 40%;
min-width: 338px;
padding: 16px 16px 0;
display: block;
width: 400px;
}
.personal-info {
height: 250px;
}
.product-info {
position: sticky;
position: -webkit-sticky;
top: 24px;
border: 1px solid red;
}
.content-other {
width: 100%;
background: #f5f5f5;
height: 400px;
}
<div class="container">
<div class="content">content area here</div>
<aside class="right-side">
<div class="personal-info">some info</div>
<div class="product-info">sticky info</div>
</aside>
</div>
<div class="content-other">.product-info unsticks when it hits here</div>
Cheers
Simply remove align-self: flex-start;
body {
padding: 20px;
}
.container {
margin-left: auto;
margin-right: auto;
position: relative;
padding-bottom: 16px;
padding-top: 16px;
width: 100%;
display: flex;
}
.content {
position: relative;
max-width: 100%;
flex-basis: 74%;
border: 1px solid black;
width: 300px;
margin-right: 20px;
height: 540px;
}
.right-side {
/*align-self: flex-start;*/
background-color: #ffffff;
border: 2px solid #e8e8e3;
border-radius: 0 4px 4px 4px;
flex: 1 1;
flex-basis: 40%;
min-width: 338px;
padding: 16px 16px 0;
display: block;
width: 400px;
}
.personal-info {
height: 250px;
}
.product-info {
position: sticky;
position: -webkit-sticky;
top: 24px;
border: 1px solid red;
}
.content-other {
width: 100%;
background: #f5f5f5;
height: 400px;
}
<div class="container">
<div class="content">content area here</div>
<aside class="right-side">
<div class="personal-info">some info</div>
<div class="product-info">sticky info</div>
</aside>
</div>
<div class="content-other">.product-info unsticks when it hits here</div>
Newbie question here. Trying to learn the basics. I have a simple page with a header a footer and a container. In that container I want an image, and I want it centered. Using margin: 0 auto is not doing it. I have tried explicitly giving the container a width, still no good. Thanks.
html,
body {
margin: 0px;
padding: 0px;
height: 100vh;
}
#header {
position: relative;
height: 10%;
width: 100%;
background-color: yellow;
}
#footer {
position: relative;
height: 10%;
width: 100%;
background-color: lightgray;
}
#container {
height: 80%;
width: 100vw;
background-color: red;
}
#imagewrap {
position: absolute;
border: 1px solid #818181;
z-index: 2;
height: 75%;
display: block;
margin: 0 auto;
}
<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>
jsfiddle
remove position: absolute; and add width to imagewrap class .like width: 300px;
html, body {
margin: 0px;
padding: 0px;
height: 100vh;
}
#header {
position: relative;
height: 10%;
width: 100%;
background-color: yellow;
}
#footer {
position: relative;
height: 10%;
width: 100%;
background-color: lightgray;
}
#container {
height: 80%;
width: 100vw;
background-color: red;
}
#imagewrap{
width: 300px;
border: 1px solid #818181;
z-index: 2;
height: 75%;
display: block;
margin: 0 auto;
}
<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>
You can add text-align: center; instead of margin: 0 auto; to imagewrap
html, body {
margin: 0px;
padding: 0px;
height: 100vh;
}
#header {
position: relative;
height: 10%;
width: 100%;
background-color: yellow;
}
#footer {
position: relative;
height: 10%;
width: 100%;
background-color: lightgray;
display: block;
}
#container {
height: 80%;
width: 100vw;
background-color: red;
}
#imagewrap{
position: absolute;
border: 1px solid #818181;
z-index: 2;
height: 75%;
display: block;
width: 100%;
text-align: center;
}
<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>
Try background image for that container and position it center.
Please change background url as per your requirement
html, body {
margin: 0px;
padding: 0px;
height: 100vh;
}
#header {
position: relative;
height: 10%;
width: 100%;
background-color: yellow;
}
#footer {
position: relative;
height: 10%;
width: 100%;
background-color: lightgray;
}
#container {
height: 80%;
width: 100vw;
background-color: red;
background-image: url(http://clockworkmoggy.com/wp-content/uploads/image00.png);
background-repeat: no-repeat;
background-position: center;
}
#imagewrap{
position: absolute;
border: 1px solid #818181;
z-index: 2;
height: 75%;
display: block;
margin: 0 auto;
}
<div id="header">
</div>
<div id="container">
<div id="imagewrap">
</div>
</div>
<div id="footer">
</div>
Just remove margin:0 auto; and replace text-align: center; in #imagewrap. It will work!!
Check the below JSFiddle code for reference.
html, body {
margin: 0px;
padding: 0px;
height: 100vh;
}
#header {
position: relative;
height: 10%;
width: 100%;
background-color: yellow;
}
#footer {
position: relative;
height: 10%;
width: 100%;
background-color: lightgray;
}
#container {
height: 80%;
width: 100vw;
background-color: red;
}
#imagewrap{
border: 1px solid #818181;
z-index: 2;
height: 75%;
display: block;
text-align: center;
}
<body>
<div id="header"> </div>
<div id="container">
<div id="imagewrap">
<img src="https://assets.servedby-buysellads.com/p/manage/asset/id/29708" height="100%" id="front" />
</div>
</div>
<div id="footer"> </div>
</body>
JSFiddle Demo
so i am having trouble collapsing borders between two floating divs. I know how to do it with table cells but these are not cells and I'm not using tables. Here is a picture of what the picture looks like page image
Here is my html and css code as well.
body{
background-color: #C8C8C8;
}
h1{
text-shadow: 2px 3px gray;
margin-left: auto;
margin-right: auto;
width: 200px;
}
img.width{
width: 100%;
}
img.tLeft {
float: left;
z-index: -1;
padding-right: 3em;
}
img.tRight {
float: right;
z-index: -1;
}
.div1 {
width: 900px;
height: 700px;
margin-left: auto;
margin-right: auto;
border-radius: 20px;
box-shadow: 10px 10px 5px #A8A8A8;
background-color: #4dffa6;
overflow: hidden;
z-index: -1;
}
.div2 {
height: auto;
border: 1px solid red;
overflow: hidden;
border-top-left-radius: 20px;
top: 0;
left: 0;
float: left;
border-right: collapse;
}
.div3 {
height: auto;
border: 1px solid red;
overflow: hidden;
border-top-right-radius: 20px;
top: 0;
right: 0;
z-index: -1;
float: right;
}
.div4 {
height: auto;
border: 1px solid blue;
background-color: lightgray;
overflow: hidden;
left: 0;
display: block;
}
strong{
font-size: 70px;
color: red;
}
<div>
<img class="width" src="images/rancidbanner.png" alt="Rancid Tomatoes">
</div>
<h1>TMNT (2015)</h1>
<!---block one--->
<div class="div1">
<!---block two--->
<div class="div2">
<img class="tLeft" src="images/rottenlarge.png" alt="Rotten" /> <strong>33%</strong>
</div>
<!---block three--->
<div class="div3">
<img class="tRight" src="images/overview.png" alt="general overview" />
</div>
<!---box four
<div class="div4">
<p>HEllo relkgnaldfkgnadlgsknasdlkgnasldkgnaslkdgnasldkn aslkdgnslkdgn sjdnaslkdjfnaslkdjfn sdgnaslkjgnlaskjgdn
</p>
</div>
--->
</div>
Might be worth using a CSS reset so that the browser doesn't affect your CSS - http://meyerweb.com/eric/thoughts/2011/01/03/reset-revisited/
the layout here is a template for my website http://jsfiddle.net/QvFV8/12/ as you can see the content overflows the footer.
It works fine for when there is only a small amount of content, which is what I want.
I've tried clear both in the 1st footer section, but this has no effect
How can the page be stretched so that the footer remains at the bottom, regardless of the amount of content (some pages will have more or less content then others)
<body>
<div class="container">
<div class="header">
<div class="headerleft">
<div class="headerleftcon">leftcon</div>
</div>
<div class="headerright">
<div class="headerrightcon">rightcon</div>
</div>
<div class="header-content">Header
</div>
</div>
<div class="body">
<div class="left-sidebar">
<div class="left-content">left sidebar</div>
</div>
<div class="right-sidebar">
<div class="right-content">right sidebar</div>
</div>
<div class="content">Content 1
<div class="centerbox">
<div class="centerboxcontent">Center box <br> </div>
</div>Content 2 <br> Content 2 <br>Content 2 <br>Content 2 <br>Content 2
bla bla bla
</div>
</div>
<div class="footer">
<div class="footerleft">
<div class="footerleftcon">botleftcon</div>
</div>
<div class="footerright">
<div class="footerrightcon">botrightcon</div>
</div>
<div class="footer-content">Footer</div>
</div>
</div>
</body>
The css is as follows
html, body {
height: 100%;
width: 100%;
padding: 0px;
margin: 0px;}
.header, .footer{
height: 80px;
background-color: #EFEFEF;
position: relative;}
.header-content{
padding: 20px;
text-align: center;}
.headerleft{
height: 100%;
background-color: red;
width: 50px;
float: left;}
.headerleftcon{
padding: 0px 0px 0px 0px;}
.headerright{
height: 100%;
background-color: red;
width: 50px;
float: right;}
.headerrightcon{
padding: 0px 0px 0px 0px;}
.footer-content{
padding: 20px;
text-align: center;}
.container{
height: 100%;}
.body{
height: 100%;
margin-top: -80px;
margin-bottom: -80px;
background-color: #C7DFFA;}
.content{
padding: 80px 0px 0px 0px;}
.left-sidebar{
height: 100%;
background-color: gray;
width: 50px;
margin-top: -80px;
margin-bottom: -80px;
float: left;
clear: both;}
.right-sidebar{
height: 100%;
background-color: gray;
width: 50px;
margin-top: -80px;
margin-bottom: -80px;
float: right;}
.centerbox{
height:100px;
background-color: blue;}
.centerboxcontent{
padding: 0px 0px 0px 0px;}
.right-content{
padding: 80px 0px 0px 0px;
text-align: right;}
.left-content{
padding: 80px 0px 0px 0px;}
.footer{
clear:both;}
.footerleft{
height: 100%;
background-color: red;
width: 50px;
float: left;}
.footerleftcon{
padding: 0px 0px 0px 0px;}
.footerright{
height: 100%;
background-color: red;
width: 50px;
float: right;}
.footerrightcon{
padding: 0px 0px 0px 0px;}
* {
margin: 0px;
padding: 0px;
}
html, body {
height: 100%;
}
.header, .footer {
height: 80px;
background-color: #EFEFEF;
}
.header-content {
padding: 20px;
text-align: center;
}
.headerleft {
height: 100%;
background-color: red;
width: 50px;
float: left;
}
.headerleftcon {
padding: 0px 0px 0px 0px;
}
.headerright {
height: 100%;
background-color: red;
width: 50px;
float: right;
}
.headerrightcon {
padding: 0px 0px 0px 0px;
}
.footer-content {
padding: 20px;
text-align: center;
}
.container {
width: 100%;
min-height: 100%;
position: relative;
overflow: hidden;
}
.body {
background-color: #C7DFFA;
overflow: hidden;
margin-bottom: -30000px;
padding-bottom: 30000px;
}
.content {
margin-right: 50px;
margin-left: 50px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
margin-bottom: 80px;
}
.left-sidebar {
background-color: gray;
width: 50px;
float: left;
}
.right-sidebar {
background-color: gray;
width: 50px;
float: right;
}
.left-sidebar, .right-sidebar {
margin-bottom: -30000px;
padding-bottom: 30000px;
}
.centerbox {
background-color: blue;
}
.centerboxcontent {
padding: 0px 0px 0px 0px;
}
.right-content {
text-align: right;
}
.left-content {
}
.footer {
clear:both;
position: absolute;
width: 100%;
left: 0px;
right: 0px;
bottom: 0px;
}
.footerleft {
height: 100%;
background-color: red;
width: 50px;
float: left;
}
.footerleftcon {
padding: 0px 0px 0px 0px;
}
.footerright {
height: 100%;
background-color: red;
width: 50px;
float: right;
}
.footerrightcon {
padding: 0px 0px 0px 0px;
}
I understand that getting the footer of a website is somewhat harder than anything else, but i don't know how many more questions i have to see about this, its simply a call for learning CSS, now here are two fiddles that i have made before for the same question
So, what you have to do is make sure your footer is absolutely at the bottom of your container, so to do that you need to make your container position:relative; and 100% height of the content Also the container has to have a padding bottom that is the height of the footer . that's it really
http://jsfiddle.net/eTwJh/2/ and here is one with no content - http://jsfiddle.net/eTwJh/3/
The duplicate question is here
How do I make sure that my footer shows all the way at end of the page rather than in the middle?
here is some example code
<!DOCTYPE html>
<html>
<head>
<title>My Amazing Footer</title>
<style>
html, body {
margin:0;
padding:0;
height:100%;
}
.wrapper {
min-height:100%;
position:relative;
}
footer{
background:#F1F1F1;
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
height:300px;
}
footer p{
text-align: center;
padding-top:100px;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="Content">
<p>HTML Ipsum Presents</p>
</div>
<footer>
<p>© My Website 2013. All Rights Reserved!</p>
</footer>
</div>
</body>
</html>