I am trying to figure out the best way to center my content and sidebar on the page. Nothing I've tried is working (I'm very new to CSS & HTML).
I tried setting the widths to percentages, and set the margin at auto, but something's just not working. I don't want it to have a fixed width because it will look different on different screens. Not sure what the best way to go about this is, any help would be appreciated!
I also tried overflow: auto but that takes away the border-radius on my home page...
http://flashandshine.com/port/?page_id=73
You can tray this CSS in your container:
.container {
width:80%;
display:table;
margin: 0 auto;
}
If the content you're trying to center is a fluid width, you can do some simple math to center it. For example, if your content is 90% wide, there is a remainder of 10% in the parent container, meaning a left and right margin of 5% would center it.
It looks like from your example the problem is that your <ul> has padding and margin, and isn't set to a specific width.
Related
i am learning CSS, i am trying to place the div with red background just below the body, i can't seem to make it fit to the body, whenever i adjust the width it doesn't align with the body,when i tried to place it center and 100% width, it occupies 100% of the width of the page it does not align with the white background area, whenever i do 80% it does align left and does not align with the white background area. Please point me to the right direction. I'm stuck :(
the code i have so far is here: http://pastebin.com/VPMgbzQ2
Thanks in advance.
Make your footer div out of the tabs div and no need of position: absolute on it. Make following changes:
#footer
{
margin-top:80%;
height: 20px;
width:50%;
text-align:center;
background:#C00;
}
Here is fiddle.
Also it seems that you are trying to make responsive design but let me tell you that the way you are proceeding is not the right one for it. You may read Responsive Design By Ethan Marcotte for learning it.
EDIT
Make following changes:
Give height: 400px; or as required to table div.
Make your footer div out of the table div.
Either remove margin-top or change it to 5% or 10% as required in footer div.
Add min-height: 100%; to .tabs.
Check out the fiddle.
Try hardcoding the height value
#spaceheader {
width: 100%;
height: 100px;
background: #000000;
}
I see your issue now. The parent element <div class="tab"> is what's causing your issues. If I were you, I'd take the radio buttons out of the tab, make it not have a float:left on it, and this will probably fix things. You then need to remove the absolute positioning on your footer div.
Also, it looked like you put the footer div inside of the tab, when in actuality, it should be outside of all of the tabs, beneath them in the code.
Ok, if you go here: http://opportunityfinance.net/Test/2013conf/index.html
You will notice 2 layout issues
This image of the 3 logos needs to be below the "Gold" <h4> tag. But for some reason it won't do it. I have assigned the <div> tag a position of relative since there are other divs within it that need to align the images to the bottom, and this does it correctly, however, it now won't go below the <h4>Gold</h4> HTML.
Next Layout issue:
I have been trying like hell to get a footer on the bottom of the page. Sounds simple right? WRONG! But now that I got the div to be at the bottom, it seems to be cutting off the top area divs above it. So, not all of the content is showing. Instead it is being pushed underneath of the footer. How can I fix this? Tried to put a padding on it, but now sure where and/or how? margin-top on the footer doesn't seem to do anything either.
Any help on this is greatly appreciated. I have been struggling like hell to get this simple layout in order. It should be a fluid layout, as I'm resizing text down as the page resizes also, which seems to be perfectly fine, except for these 2 problems :(
EDIT
Here is a pic of what it looks like when applying the container div a 100 pixel height value:
It is giving it too much space between the <h4>Gold</h4> and the 3 images. Atleast this is the case in Opera. Any possible work-arounds for this?
here's a fix for one
.body {
background-color: #FFFFFF;
padding: 2em 2em 52px 0;
}
you have 3 logo's in one div, on that div add a height, for example
element.style {
height: 100px;
position: relative;
width: 100%;
}
Pretty basic stuff really, you should look into clearfix's here http://css-tricks.com/snippets/css/clear-fix/
When you add a float or position:absolute; to a div, in a way it gives up its reserved space so that causes the parent div to think that there isnt anything inside and therefor has no height, clearfix will fix these problems for you, reason i say is becuase the 3 logo's are all either floated or absolute;
this is the result i get
I have an image slider which is positioned absolute and has a width of 1280px. The margin-left is -160px to center it in its parent. The parent width is 960px with margin set to '0 auto' to achieve a centered affect.
The image slider should only take up width:960px so that the overflow doesn't cause the browser to handle it with scrollers. Is it possible to achieve something like overflow:hidden while still showing the overflow content at high screen resolutions?
problem example: http://almightyidea.com/test/slider/
basic css:
.slide-wrapper {
position:relative;
width:960px;
margin:0 auto;
}
.slideshow{
position:absolute !important;
margin-left:-160px;
}
I think you should use relative widths for the wrapper. So let it expand wider when the is room to do so. You could also use JavaScript to calculate the width of the viweport for you and set that width to the wrapper.
You could also just use an existing jQuery plugin to do all the heavy lifting. I use Cycle when I need to do stuff like this. http://jquery.malsup.com/cycle/
I'm using a two column layout with a sticky footer.
I'm trying to make the sidebar use 100% height, even when there's not much content on the page.
I've used two techniques to do this. The first is a CSS sticky footer (http://www.cssstickyfooter.com/) and the second is faux columns (http://www.alistapart.com/articles/fauxcolumns/).
Faux columns is working well to keep two columns equal height, and to expand either one as required.
My challenge is that if you look at this example (http://visuals.customstudio.co.uk/atc/sidebar/) you'll see that the sidebar is not extending to the full height of the page.
I've tried another technique as detailed here (http://stackoverflow.com/a/6838338/557002), which you can see here (http://visuals.customstudio.co.uk/atc/sidebar/about.html) but this means that if the sidebar has more content that the main area, it's not seen.
Any ideas of how I can make both columns increase the page height as required, and extend all the way to the footer will be massively appreciated.
Thanks in advance,
Tom
I think I know what you mean - but the solution deviates from faux columns. I think you want to make the right column will always appear to fill the vertical height of the inner container.
To do this just use the background image on the <div id="outer" /> element. Like so:
#outer {
url(../images/faux-columns.png) repeat-y center top;
}
Hope that helps!
what about giving your .main-centre a min-height ? i don't know if i get you right but this looks good for me.
btw many of your paddings and margins are obsolete and could result into cross-browser problems.
I think that the problem as with your about.html is with this css code:
.main-wide {
overflow: auto;
padding-bottom: 266px; /* footer height */
}
When you tried to extend your sidebar it is hidden by the overflow of .main-wide try with giving custom width to the sidebar and main-wide, for example:
.main-wide {
width:75%; //or whatever you want in ratio or pixels
overflow: auto;
padding-bottom: 266px; /* footer height */
}
and
.sidebar{ //any sidebar class
width:25%;
min-height:300px; //or as your wish
}
P.S. : I am not a professional web developer, but have little knowledge. Hope it will help you.
I've got a container that's set to a max-width:780px and height is undeclared. Inside the container, there's an image slideshow. Everything on the page is responsive, so as the width decreases, the image (who's width is set to 100%) adjust's the heights container.
The slideshow change's the images to display:static; and position:absolute; which no longer "holds open" the container because it's not seen as content of the container
Is there any creative solution out there to take the height of a child element that's absolutely positioned?
Example below has NO height declared on the main container.. nothing's holding it open.
http://dhut.ch/test/santos/
Thank you!
Are the images all the same dimensions? If yes, you can use a percentage padding-top on the element that contains the images.
So if your images are all, say, 760px wide by 500px tall, that's 500/760 = .65789
Which as percentage would translate into something like:
#main {
position: relative;
max-width: 760px;
padding-top: 65.789%;
}
The reason this works is because with padding if it's set with a percentage, it is calculated as a percentage of the width. As the element shrinks in width, the height will shrink proportionately and the box will remain in the same ratio of width to height. The images, positioned absolutely, won't be adding to the height of the box.
This'll work as long as your images are all the same aspect ratio and you're not expecting that ratio to change. If you'll be using a lot of random images, this isn't for you.
I recently had a similar problem with an image that I needed to absolute position at the top of a Zurb Foundation templated page in order to pull it out of the flow and reset its dimensions (Image had to stretch to edges of wrapper, instead be enclosed by its parent .row padding). However, of course, this meant that all the fluid responsive elements below it popped right up over the top of the image. Setting a margin-top or positioning the sibling elements below meant a rigid top space that didn't resize with the width of the browser.
To get around it, I placed a duplicate of the image right after the absolute positioned image and set its visibility: hidden; I had to add a little bit of extra margin bottom to make up for the difference in height, but the end result is everything on the page flowing exactly to the height of the image in use.
I've also used the padding trick described by unexplainedBacn above, and it's a great trick as well. It takes a little bit of math, but I voted that answer up. Great solution.
I think you'd better change your approach. For sliders, the best practices is to float child elements of the container, and also use one of the known techniques to prevent parent's great collapse. So, I suggest that you remove the position: absolute CSS rule from images and float them inside your <div id='main'>, then use any of these methods to force it to encompass it's children:
div#main {overflow: hidden;}
div#main:after {content: ''; display: block; clear: both; visibility: hidden;}
Add a <div style='clear: both;'> to the end of your main div container.
Remove the absolute position. I would avoid inline styling as well.