Can anyone tell me what I need to do in order to get the following page to center the contents correctly?
I've been trying to work with something else I used earlier in the day from here:
#divWrapper {margin:0 auto; text-align:center;}
#div {text-align:left;}
But this isn't working for me. One of the pages I need help with is here:
REDACTED
Thank you for any help, I'm just trying to get this fixed before I can head off to bed :\
#main-inner {
position: relative;
width: 960px;
border-top: 3px solid #DADADA;
margin: 20px auto 0;
overflow:auto;
zoom:1;
}
try this one. replace the existing with this. it should center the content.
It needs a width! to work correctly.
Give your #divWrapper a width. By default the width will expand as far as the containing element, so to create the appearance of it being centered, its width needs to be less than its containing element.
You can only center elements with margin:0 auto when you provide a fixed width from which the margins can position themselves from automatically. So add a fixed with to your wrapper and it should work.
You might also need to specify text-align:center; if you want the actual div contents centered.
Try this #divWrapper {margin:0 auto; text-align:center;width:960px}
#div {text-align:left;width:500px}
Edit:
There are typing mistakes in your CSS.
Check this updated CSS for margin-inner & margin-inner-right. It will fix your problem
#main-inner {
float:left;
position:relative;
width:100%;
border-top:3px solid #dadada;
margin-top:20px;
margin-right:auto;
margin-left:auto;
}
#main-inner-right {
position:relative;
width:640px;
text-align:left;
margin-top:20px;
margin-right:auto;
margin-left:auto;
}
Related
I am trying to bring the .day_line columns on the bottom of .lines_container. I tried to set extra .lines in the .day_line colmn and give them
position:absolute;
bottom:0
and to parent
position:relative;
but it doesn't push the lines on the bottom...
Any reason/solution?
My codes here http://jsfiddle.net/BqDfn/
Thnx!
If the container is going to keep that fixed height, you could do this:
.day_line {
height: 100%;
}
I didn't understand your question very well, but i guess you want those strips to go all the way down, if so set the Height: 100%
.day_line{
float:left;
margin-left:50px;
position:relative;
width:10px;
height:100%; // Changed to 100%
background:red;
overflow: hidden;
}
I installed this plugin on a theme. This theme had a slider, but I didn't like it. So I installed this one.
http://wordpress.org/extend/plugins/content-slide/
I tried using this
#wpcontent_slider_container{
position:relative;
margin: 0 auto;
}
And this
#wpcontent_slider_container{
position:relative;
margin-left:auto;
margin-right:auto;
}
And nothing happens.
Do I have to put something in div?
Change width
#wpcontent_slider_container{
width: 500px;
margin:0 auto;
}
I had the same problem. This is how I solved it:
#wpcontent_slider_container {
margin-left: auto !important;
margin-right: auto !important;
}
#wpcontent_slider {
/* Your styling here */
}
Without the "!important" thingy the CSS didn't work fo me either.
In #wpcontent_slider_container's parent element add
text-align:center;
to center align your #wpcontent_slider_container
If you know the width of the slider, here is a little fix that worked for me when center align was being stubborn.
#sliderDiv{
position:relative;
left:50%;
margin-left:-(half the width of the div);
(ex. if div is at 500px it would be margin-left:-250px;)
}
It's not pretty, but it works. You might have to hide the horizontal overflow of the outer container though.
#wpcontent_slider_container{
text-align: center;
}
or use <center> Tag
Finally I can fix the problem with the slider ubication in my web page.
Just modify the style.css , .main_img { float:left; margin:15px 10px 0 60px}, change the values.
Using the 'margin-right' and 'margin-left' on auto !important worked for me as well. It actually also worked even without using the !important command.
Hi stack overflow community. I have 2 dynamic divs that I want to float right inside a container. But I want the last div on the HTML to be more on the right than the first one. My problem is that I can't change the HTML, only CSS.
This will be used for navigation between pages, so I can have both divs visible or only one. Even if I only have one div, it has to be aligned to the right of the container (that's why I wanted to use floats).
Here's a jsfiddle for you to understand better: http://jsfiddle.net/Cthulhu/yVCDZ/1/
I want "Next" to appear after "Previous". Thanks in advance.
Instead of float, use display:inline-block; and set the container's text-align:right;
I updated your fiddle: http://jsfiddle.net/mestekweb/yVCDZ/2/
That should get you started, at least.
ps - You will probably have problems with IE <8. I can offer some assistance there as well, if you need.
Quick update using positioning:
#container {
width:300px;
height:70px;
border:1px solid black;
position: relative;
}
#previous {
width:70px;
height:70px;
background:gold;
position: absolute;
right: 70px;
}
#next {
width:70px;
height:70px;
background:lightblue;
position: absolute;
right: 0;
}
As per i understand may be that's you want. You can use direction with display:inline-block;
Check this http://jsfiddle.net/yVCDZ/3/
& there is an other alternative which work in all browsers
Check this http://jsfiddle.net/yVCDZ/8/
By using the property position:absolute; I have to mention the correct size of all layers (in my case 3 layers "#header", "#mybody", "#footer") where in my website #mybody's height is dynamic. So, I need #footer's position should be something like relative but using relative I am unable to set with:100%; Even if I set width:100% I am not getting complete 100% using relative. However I am getting 100% using absolute but I can't use absolute for above reason(s). Also I don't want footer to be fixed. How can I set my footer's width to 100% without using absolute or fixed position? Using width:100% with other than absolute or fixed doesn't resulting complete 100% to me.
Code:
mheadf {
position:relative;
width:100%;
height:35px;
border:thin solid black;
}
mbody {
position:relative;
width:800px;
height:500px;
border:thin solid black;
}
mfootf {
position: relative;
width:100%;
height:115px;
border:thin solid black;
}
-->
Using width:100%; should make the div 100% in width, assuming there are no margins or paddings on your body/div. Remove those and you'll be good to go.
How can I make my website look more like the second image presented below? (Notice the left margin in the second image, versus no margin in the first one.)
http://fotografcim-2.hosting.parking.ru/ (This is a demo site.)
No margin:
Margin:
div#outer {
background-color:#FFFFFF;
border:1px solid #D0D4C9;
margin:0 auto 5px;
padding:0;
width:80%;
}
The above one is your style
I remove the auto in the margin:
Put margin as you want
margin:0 5px;
Use FF Firebug addon for better understanding
Refer these
http://www.webreference.com/authoring/style/sheets/layout/advanced/
http://www.yourhtmlsource.com/examples/positioning2.html
I would surround that all in a wrapper and set the width of that wrapper to the current width of the internal div.