I am trying to center two divs (#about and #testimonial-snippets) within the larger black div. How can I do this?
JS Fiddle: http://jsfiddle.net/DgtqM/
HTML
<footer>
<div id="footer-section">
<section id="about">
<img class="profile-photo" src="http://dummyimage.com/42x42/000/fff" alt="profile" height="44" width="44">
<p>Lorem ipsum dolor sit amet. Find him on Twitter and Instagram. <a id="slide-toggle" href="#">Contact</a> | Archive</p>
</section>
<section id="testimonial-snippets">
<img class="profile-photo" src="http://dummyimage.com/42x42/000/fff" alt="profile" height="44" width="44">
<div class="snippet">
<p>This is a testimonial.</p>
<a class="read-testimonial" href="/testimonials">read more</a>
</div>
</section>
</div>
</footer>
CSS
footer {
background: #222;
clear: both;
color: #f4f3f1;
float: left;
padding: 50px 0;
width: 100%;
}
#footer-section {
margin: 0 auto;
overflow: hidden;
position: relative;
width: 940px;
}
footer section {
float: left;
width: 300px;
}
#about {
margin-right: 20px;
}
footer a {
border-bottom: 1px dotted #f4f3f1;
color: #f4f3f1;
}
.profile-photo {
border: 1px solid #f4f3f1;
float: left;
margin: 4px 10px 10px 0;
}
p {
margin: 0 0 1em;
}
I allowed myself to reduce that problem to a minimum of markup. Everything else is not relevant to the question and only makes it harder to understand.
<footer>
<section id="about">About</section>
<section id="testimonial-snippets">Testimonial</section>
</footer>
One solution would be to make these sections inline-block elements and have them centered in the footer:
footer {
background: #222;
padding: 50px 0;
width: 100%;
text-align: center;
}
footer section {
width: 300px;
height: 50px;
display: inline-block;
text-align: left;
}
/* Just coloring the different divs */
#about { background: red; }
#testimonial-snippets { background: green; }
http://jsfiddle.net/DgtqM/6/
Wrap the elements within a new div. Then give the new div a fixed width and use margin: 0px auto for styling.
HTML
<div id="footer-section">
<div class="wrap">
<section id="about">
<!--Content -->
</section>
<section id="testimonial-snippets">
<!--Content-->
</section>
</div>
</div>
CSS
.wrap{
width: 620px;
margin: 0px auto;
overflow: auto;
}
Example http://jsfiddle.net/DgtqM/5/
Related
Right now I have a footer that is always at the bottom of the page. This is fine until I have more content than can fit on the page, which means when you scroll down, the footer scrolls up as if its fixed..
Here is my CSS:
.footerWrap{
clear: both;
position:absolute;
width:100%;
bottom:0;
}
.footer {
position: relative;
margin-bottom: 0px;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
background-color: #000000;
color: #FFFFFF;
}
.footerLinks{
padding-left: 150px;
text-align: left;
}
.footerLinks p {
display: inline;
}
.footerLinks a {
color: #169e98;
}
.footerSocial{
text-align: right;
}
And my HTML:
<!--Footer-->
<div class="footerWrap">
<div class="footer">
<div class="footerLinks">
Privacy Policy<p> |</p>
Sitemap<p> |</p>
<p>© 2017</p>
</div>
<div class="footerSocial">
<img src="image/findfb.png" alt="Find us on Facebook">
</div>
</div>
</div>
Essentially, I want to put the footer Div below the text content.
it is very easy :
wrap your html code in
<div class="page">
...
</div>
and just add css
.page{
position:relative;
}
that is all
I am trying to use a flexbox approach to create a layout that will resize the header width and content dimensions when a window is resized, but maintain the sidebar dimensions.
I found the following example from this Flexbox Approach to get me started, and it works as desired for the content div itself. But after looking it over, I'm unsure how to make it work as described with a fixed width, 100% height sidebar.
CSS from example:
<style>
html, body {
height: 100%;
margin: 0
}
.box {
display: flex;
flex-flow: column;
height: 100%;
}
.box .row {
border: 1px dotted grey;
}
.box .row.header {
flex: 0 1 auto; /* The above is shorthand for: flex-grow: 0, flex-shrink: 1, flex-basis: auto */ }
.box .row.content {
flex: 1 1 auto;
}
.box .row.footer {
flex: 0 1 40px;
}
</style>
HTML from example:
<div class="row header">
<p><b>header</b> <br /> <br />(sized to content)</p>
</div> <div class="row content">
<p> <b>content</b> (fills remaining space) </p>
</div>
<div class="row footer">
<p><b>footer</b> (fixed height)</p>
</div>
</div>
The following codepen example gave me the information I needed to get my layout working:
http://codepen.io/JosephSilber/pen/HqgAz
CSS:
.header {
height: 50px;
}
.body {
position: absolute;
top: 50px;
right: 0;
bottom: 0;
left: 0;
display: flex;
}
.sidebar {
width: 140px;
}
.main {
flex: 1;
display: flex;
flex-direction: column;
}
.content {
flex: 1;
display: flex;
overflow: auto;
}
.box {
min-height: -webkit-min-content;
display: flex;
}
.column {
padding: 20px;
border-right: 1px solid #999;
}
.column > div {
height: 2000px;
background: red;
}
.column:nth-child(2) > div {
height: auto;
}
/* All of these are just for this demo's design. */
body {
font-family: sans-serif;
font-size: 20px;
line-height: 50px;
text-transform: uppercase;
font-weight: bold;
}
.header {
text-align: center;
color: #fff;
background: #444;
}
.sidebar {
background: #666;
padding: 4px 20px;
color: #fff;
}
.page-header {
padding: 6px 20px;
background: #004141;
color: #fff;
font-size: .8em;
}
.content {
background: #ddd;
}
HTML:
<div class="header">Main header</div>
<div class="body">
Move this: <div class="sidebar">Sidebar</div>
<div class="main">
<div class="page-header">Page Header. Content columns are below.</div>
<div class="content">
<div class="box">
<div class="column">
<div>Column 1</div>
</div>
<div class="column">
<div>Column 1</div>
</div>
<div class="column">
<div>Column 1</div>
</div>
</div>
</div>
</div>
To here: <div class="sidebar">Sidebar</div>
</div>
To get the sidebar on the right side, I simply moved <div class="sidebar">Sidebar</div>to just above the closing div tag for the .body class.
Here is the code I am using so far. I have 6 images that I am trying to arrange and make responsive as well.
Idea is like this
image -blank space - image
image -----blank space -----image
image -blank space - image
When I squeeze the page they do not end up stacked uniformly on top of each other. The spaces need to go away so all I have is 6 images on top of each other. CSS below followed by html
.row:after {
content: "";
clear: both;
display: table;
}
/** North Scottsdale */
.nsdl {
float: left;
margin: 0 175px;
padding: 0 0px;
width: 300px;
height: 200px;
border: 3px solid white;
background-image: url("/images/dphotos/test2a.png");
}
/** break1 */
.break1 {
float: left;
margin: 0px;
padding: 0px;
width: 95px;
height: 200px;
border: 3px solid white;
}
/** Scottsdale */
.sdl {
float: left;
margin: 0px;
padding: 10px;
width: 300px;
height: 200px;
border: 3px solid white;
background-image: url("/images/dphotos/test2a.png");
}
/** Tempe */
.tmpe {
float: left;
margin: 0 35px;
padding: 10 10px;
width: 300px;
height: 200px;
border: 3px solid white;
background-image: url("/images/dphotos/test2a.png");
}
/** break2 */
.break2 {
float: left;
margin: 10px;
padding: 10px;
width: 475px;
height: 200px;
border: 3px solid white;
}
/** Downtown */
.dtown {
float: left;
margin: 10px;
padding: 10px;
width: 300px;
height: 200px;
border: 3px solid white;
background-image: url("/images/dphotos/test2a.png");
}
/** West Side */
.wside {
float: left;
margin: 0 175px;
padding: 0 0px;
width: 300px;
height: 200px;
border: 3px solid white;
background-image: url("/images/dphotos/test2a.png");
}
/** break1 */
.break3 {
float: left;
margin: 0px;
padding: 0px;
width: 95px;
height: 200px;
border: 3px solid white;
}
/** UPTOWN */
.utown {
float: left;
margin: 0 120px;
padding: 10 10px;
width: 300px;
height: 200px;
border: 3px solid white;
background-image: url("/images/dphotos/test2a.png");
}
<div class="w3-container">
<div class="row">
<div class="left">
<div class="nsdl" style="text-align: center;">
<h2> NORTH SCOTTSDALE</h2>
</div>
</div>
<div class="center"> </div>
<div class="right">
<div class="sdl" style="text-align: center;">
<h2>SCOTTSDALE</h2>
</div>
</div>
</div>
<div class="row">
<div class="left">
<div class="tmpe" style="text-align: center;">
<h2>TEMPE</h2>
</div>
</div>
<div class="center"> </div>
<div class="right">
<div class="dtown" style="text-align: center;">
<h2>DOWNTOWN</h2>
</div>
</div>
<div class="left">
<div class="wside" style="text-align: center;">
<h2>WEST SIDE</h2>
</div>
</div>
<div class="center"> </div>
<div class="right">
<div class="utown" style="text-align: center;">
<h2>UPTOWN</h2>
</div>
</div>
</div>
</div>
I would suggest looking at a number of frameworks like Bootstrap, Skeleton and Zurb Foundation and use their CSS grid components. Look into how they control the size of various page regions with media queries using a mobile first approach.
You can definitely roll your own solution too. Here's an example.
<div class="img-group">
<div class="img-holder">
<img src="http://placehold.it/300x300?text=1">
</div>
<div class="img-holder">
<img src="http://placehold.it/300x300?text=2">
</div>
<div class="img-holder">
<img src="http://placehold.it/300x300?text=3">
</div>
<div class="img-holder">
<img src="http://placehold.it/300x300?text=4">
</div>
<div class="img-holder">
<img src="http://placehold.it/300x300?text=5">
</div>
<div class="img-holder">
<img src="http://placehold.it/300x300?text=6">
</div>
<div class="img-holder">
<img src="http://placehold.it/300x300?text=7">
</div>
<div class="img-holder">
<img src="http://placehold.it/300x300?text=8">
</div>
<div class="img-holder">
<img src="http://placehold.it/300x300?text=9">
</div>
</div>
.img-group img {
display: block;
max-width: 100%;
}
.img-holder {
float: left;
width: 50%;
}
#media ( min-width: 448px ) {
.img-holder {
width: 33.333%;
padding: 0.75%;
}
}
#media ( min-width: 779px ) {
.img-holder {
box-sizing: border-box;
width: 25%;
padding: 2%;
}
}
Demo JSFiddle.
First you make your images responsive. The simplest version of doing so is setting them to display: block; and max-width: 100%;. Setting the max width means they'll try to take up their parent element's width as long as they don't exceed their own intrinsic width. For example, if the parent element is 700px wide and the image is 600px wide, it won't stretch to fit the 700px of space. It will stop at 600px.
Now you place your images in container elements that you'll control with media queries. Use percentage widths (i.e. width: 25%; ) so they stay nice and fluid.
You might be wondering what box-sizing: border-box; does. It says that padding should be included as a part of your width definition. Normally if you have width: 25%; padding: 1%; the total width of your element would be 27% as 1% + 25% + 1% = 27%.
I am attaching my HTML and CSS hoping that someone can help me. Basically I have a right sidebar div where the content will not push to the top. When I play around with position and height properties, the content just floats all over the page and doesn't even stay in the right sidebar. I hope someone can point me in the right direction, I have looked at numerous posts and nothing I try seems to work.
HTML:
<div id="container">
<div id="head">
</div>
<div id="menuTop">
</div>
<div id="content">
</div>
<div id="sidebar">
</div>
<div id="footer">
</div>
</div>
CSS:
#container {
margin: 0 auto;
width: 1000px;
background: url("bgbg.jpg");
border: 10px solid #000;
}
#content {
float: left;
width: 750px;
padding: 0;
background: url("bgbg.jpg");
border-right: 1px dashed #fff;
}
#sidebar {
float: right;
background: url("bgbg.jpg");
width: 250px;
}
CSS Box Model 101 - the actual width of a div (or any element) is width + padding + borders
So your two floated divs add up to 1001px
the content div # 750px + 1px border is actually 751px wide, make it's width 749px and all should be well
#container {
margin: 0 auto;
width: 1000px;
background: url("bgbg.jpg");
border: 10px solid #000;
}
#content {
float: left;
width: 750px;
padding: 0;
background: url("bgbg.jpg");
border-right: 1px dashed #fff;
display:block;
}
#sidebar {
float: right;
background: url("bgbg.jpg");
width: 200px;
}
<div id="container">
<div id="head">head
</div>
<div id="menuTop">
</div>
<div id="content">ssss
</div>
<div id="sidebar">ffff
</div>
<br style="clear:both;" />
<div id="footer">
</div>
</div>
i have a page with 3 parent divs , now im having problems positioning the divs inside the header div.
my code is something like this:
divs layout:
<div id="layout">
<div id="header" class="body">
header
<div id="logo">logo</div>
<div id="menu">menu</div>
</div>
<div id="main">
<div id="left">left</div>
<div id="right">right</div>
<div id="body">body</div>
<div id="clear"></div>
</div>
<div id="footer">footer</div>
</div>
css is something like this:
.body {
background-color: #ffffff;
margin: 0px;
background-repeat: repeat-x;
background-image: url(imgs/back.png);
}
#layout {
margin:auto;
width: 1024px;
background-color: #ffffff;
}
#main {
background-color: #ffffff;
}
#header {
background-color:#0F0;
height: 300px;
}
#body {
margin-left: 180px;
margin-right: 180px;
padding: 5px;
background-color: #ffffff;
}
#footer {
margin-left: 180px;
margin-right: 180px;
padding: 0px;
background-color: #ffffff;
}
#right {
float: right;
width: 180px;
padding: 0px;
margin: 0px;
right: 0px;
background-color: #ffffff;
}
#left {
float: left;
width: 180px;
padding: 0px;
margin: 0px;
left: 0px;
background-color: #ffffff;
}
#clear {
clear:both;
}
i want to put in a position of header div (e.g. vertical: center , horizontal: 0 px (0 pixels of the header div not of the total page) on left side) and menu in other position (e.g. vertial: top , horizontal: between the center and right side (center and right side of header div only again).
i would appreciate a solution.
thanks to all.
I could be more helpful if you could clarify your question.
I am not sure of what your are asking for in terms of the location for the header.
Here is an approach to move the menu between the center and the right column. Nest the menu and the right hand column in another right aligned div. For the purposes of example I have called it right-container.
Here is the HTML
<div id="layout">
<div id="header" class="body">
header
<div id="logo">logo</div>
</div>
<div id="main">
<div id="left">left</div>
<div id="right-container">
<div id="menu">menu</div>
<div id="right">right</div>
</div>
<div id="body">body</div>
<div id="clear"></div>
</div>
<div id="footer">footer</div>
</div>
And here are the css statements I added:
#right-container {
float: right;
width: 360px;
padding: 0px;
margin: 0px;
right: 0px;
background-color: #ffffff;
}
#menu {
float: left;
width: 180px;
padding: 0px;
margin: 0px;
left: 0px;
background-color: #ffffff;
}
You can see the fiddle here:
http://jsfiddle.net/SkLvX/