I was trying to make my home page have a 2x2 grid of images.
There was a thread with a similar question already. The answer was to include this code:
#home_page .canvas {
max-width: 590px;
}
I did this and it kicks my footer over to the left. I went into the CSS and tried under every footer mention I could find to include text-align: center; code although to no avail. I also tried playing with the 590px, but it moves the images over and no longer centers them.
Any help is appreciated.
Here is a link to my page: http://johnathonpowers.bigcartel.com/
Please remove the
float:left;
property from the
#site_footer footer {
}
CSS class and it should all work fine for you.
In essence, you #site_footer footer class should look like this:
#site_footer footer {
width: 100%;
min-width: 900px;
clear: both;
margin: 0 auto;
padding-bottom: 0px;
text-align: center;
}
You #site_footer footer class currently looks like this:
#site_footer footer {
width: 100%;
min-width: 900px;
clear: both;
float: left;
margin: 65px auto 0px;
padding-bottom: 10px;
text-align: center;
}
What can be the reason to have both width and min-width properties (that too with wide differences in values). Keep one width property value (either width or min-width). Similarly, why float after clear? Understand that clear is used to remove any previous floats. If you want to continue floating, there's no reason to write clear: both
Hope this helps!!
EDIT: Please see the screenshots below!!!!
#site_footer footer
#site_footer footer 2
If you remove the float:left, your footer div will be centered.
In case you can't do it, you can overwrite the float:left property in your CSS file as such:
#site_footer footer {
float:none !important;
}
Related
I'm creating a basic generic web page with a photo gallery as practice here, but for some reason I cannot get the gallery div to float next to the sidebar div so that there isn't a big empty space above it. Floating them just destroys everything. When I inspect element it shows that there's a margin taking up all of the space to the right of the sidebar/above to the gallery, but I've looked through my css over and over and can't find where that margin could be coming from. I'm not 100% sure that's what is causing the issue though.
If anyone knows how I can make this position correctly it would be much appreciated. I feel like I've tried everything and I'm just not getting it.
Here is the link to the code on jsfiddle:
https://jsfiddle.net/laurynm/h6mu6hsb/
.gallery {
width: 80%;
position: relative;
}
#sidebar {
position: relative;
width: 230px;
}
Try this https://jsfiddle.net/h6mu6hsb/4/
#sidebar {
float: left;
position: relative;
width: 230px;
}
I took a stab in the dark, and made a jsfiddle demo for you to try out. In essence, I gathered different sections in wrappers, converted them to inline-block, and hope it looks kinda like what you wanted.
How about something like this so you dont have horizontal scrolling problems:
http://jsfiddle.net/espriella/fdmdwpp5/
Using display as table-cell
.sidebar{
min-width: 200px;
display: table-cell;
}
.gallery{
display: table-cell;
width: 100%;
}
I want to create a div, called 'container' that contains all the other elements on the page.
If I change the size the elements move and rearrange, -BUT- the div itself remains invisible! Using the Firefox inspector, it seems the div is -above- the page.
It seems very weird to me, as the divs are all properly nested and otherwise behave well.
My only guess is that this bit is causing some trouble; if i change the width, my layout goes crazy.
#upper {
float: left;
width: 100%;
height: 40%;
}
#lower {
float: left;
width: 100%;
height: 40%;
}
However I cannot quite pin down what is causing the issue. Any idea?
Here is my code: https://jsfiddle.net/xtaLfuLa/
I would just add display:inline-block; into container class.
#container {
width: 80%;
height: 90%;
margin-left: auto;
margin-right: auto;
background: rgb(163, 43, 43);
border-radius: 20px;
background: red;
display:inline-block;
}
This is happening because you're floating #upper and #lower to the left. You'll need to clear the float on the parent container. This is often done using a clearfix class. Add the following class to your parent container.
.clearfix {
overflow: auto;
zoom: 1;
}
https://jsfiddle.net/xtaLfuLa/3/
learn more here: http://learnlayout.com/clearfix.html
Not clear what you are looking for(share image layout) but you need to write the code for responsive layout. Make it
#results{
margin-left:0;
}
for smaller device and add it for larger device with media query..
I'm building a website using a grid system as the framework. At first I had no problems with margins and padding, but now I have extra white space on the right side of my website.
Here is my fiddle: http://jsfiddle.net/071ad2hg/1/
I already found the problem and it is from the following code:
.grid_12 { width: 100%; }
When I comment out this line the problem goes away, but I've used it in many places throughout my site and am wondering why this is happening all of a sudden. I would like to keep it as is and just fix it somehow.
Beacuse body has 8px margin you can change that by adding margin 0 to body css tag
demo http://jsfiddle.net/ckqkyaqd/
body {
font-family: 'elegant_luxmager';
color: #444948;
margin:0;
}
Add this to your body in the css.
margin: 0;
and set a pixel width for your grids.
.grid_12 {
width: 1000px;
margin: 0 2% 1% 0;
float: left;
display: block;
}
I would suggest using a .wrapper instead.
.wrapper {
margin-left: auto;
margin-right: auto;
width: 1000px;
}
<div class="wrapper"></div>
Found your issue:
It's the 25% margin that adds the whitespace, use a wrapper to center that part or use <center>
#images_row_1, #images_row_2, #images_iOS {
margin-left: 25%;
}
Use the inspector in Google Chrome developer tools and see the order in which the CSS is being applied. You have this additional margin which is being applied to the div. Try using a wrapper div or better yet use a defined responsive framework like Bootstrap or Foundation.
#images_row_1, #images_row_2, #images_iOS {
margin-left: 25%;
}
Is there a way to remove the white space below the footer in :- http://getbootstrap.com/examples/sticky-footer-navbar/
I've fixed this by adding {position:fixed;width:100%} but it only works for a few pages. For the other pages the footer doesn't appear at all. I've also read this but it doesn't seem to work : Can't remove Whitespace at the bottom of my document.
Could someone please explain what is the error here?
I once had the same issue using bootstrap
I used this css to stick the footer to the bottom of the page:
*{
margin: 0;
}
.wrapper{
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -0em;
}
.footer, .push{
height: 2em;
}
.footer, .push{
clear: both;
}
Put all the content in the wrapper class and use the footer class below the wrapper.
I found it somewhere when I had this issue and it worked.
I am using float and then clearing both. but still i have getting some error in the layout. can some one point out what the problem is ?
http://uniquedl.com/3closets/about.html
i want Sneak-peek control div and sneak peek products div to be next to each other. i am using this code to make it next to each other
.grid {
display:inline;
float:left;
}
But sneek-control is taking a lot of margin to the left and not sitting below the above div block
i want the layout to look like this
If you set a height on your .intro-image to 384px same size as image it should work.
.introduction .intro-image {
width: 288px;
height: 384px;
}
.sneak-peek {
clear: both;
float: left;
height: 288px;
text-align: left;
}
should do it.
You also have some problems there... check IE 7 after you finish. Probably they'll clear out by themselves.