How come in this example, http://jsfiddle.net/eVdFH/ the divs don't align?
And what do I need to do in order to make them align in the center?
Theoretically for the "navigation" it should be set to center, set width of 600px, then moved left 300px so it is in the center
Why don't they align in the center then?
Should be:
#navigation {
margin-left: -322.5px;
}
Because you have padding: 20px; and border: 2.5px on that element.
Related
I'm creating a small view on my page where I have a centered 500x650 div with some text in it.
I have a bootstrap div as a container, <div class="container">. Inside that I have my centered 500x650 div, with a CSS like this:
.desc {
position: relative;
margin: 30px 245px 0px;
height: 500px;
width: 650px;
background: #fff;
border: 1px dashed #cbd0d8;
padding: 5px;
}
This looks good. Now, I'm trying to add a small image which is supposed to be right by the left bottom corner of the dashed border. Problem is, I centered it with margin: auto, creating a huge horizontal margin on the sides of the .desc-div, so I can't position my img, which is in a div with position: relative, as the margin pushes it down under the corner.
I could use position: absolute on my image but I'm trying to avoid that as I understand it looks different on different sized monitors, and I want this image to sit pretty exactly in one spot.
How do I solve this?
To place your image exactly into the lower left corner of your .desc DIV, put your image tag inside the .desc DIV and give it the following settings:
img.yourclass {
position: absolute;
bottom: 0;
left: 0;
width: 40px;
height: 30px;
}
Since your DIV already has position: relative, it will act as the position anchor for the absolutely positioned image, and the bottom and left settings place it in the lower left corner.
The width and height of course depend on the image itself . adjust that as needed.
I'm still new in css.
I know that
text-align:center;
and
margin:auto;
put the element in the center.
but what is the exact different between them ?
Thanks In advance.
text-align: center will center the contents of the container, while margin: auto will center the container itself.
Well
That’s depends on what every property of them work.
For the margin: it’s give the specified value for the edges of the element.
For example:
margin: 5px;
Will give the element an edge of 5px each side.
So for example when you use margin:0 auto;
It gives the element 0px edge from the top and the bottom. And give it auto equal edges from left and right. So it will move to the center.
For text-align: center;
This is most used with a text as its name. you can align the text left,right or center using it.
I need both divs to have dynamic width.
The gray one has to be centered, while the blue one to float right BUT both be horizontally alingned.
These to are sitting in a wrapper.
The problem is that in order to have varying width I use display:block and this makes the gray div to push the other one down.
How can I manage this without setting a fixed width for the gray div?
EDIT
This is how it should look like. I just put another left floating div.
The red div has to be perfectly centered.
All divs' width must be dynamic.
You can nest the blue div within the grey one and absolutely position it, using left:100% will make it horizontally dock to the right side of the grey div.
Just one of many options.
Here is a demo: http://jsfiddle.net/HnsEx/
Here's a fiddle :)
fiddle
and css
#parent {
overflow: hidden;
border: 1px solid red
}
.right {
float: right;
width: 100px;
height: 100px;
background: #888;
}
.left {
overflow: hidden;
height: 100px;
background: #ccc
}
I know it is possible to evenly space divs with the same width inside of a fixed width container, but what about fluid width container?
I plan to have 28 divs with no space between them side by side. Twenty six will have a single letter of the alphabet, one will have the text 'all' and the last will have a pound sign in it.
Is this possible? Probably with CSS3 calc? If so how can I accomplish what I want?
Yes, you can just float the divs, and set their width to 1/28th of the width of the parent using the % unit:
http://jsfiddle.net/GgrKU/
#parent {
outline: 1px solid red;
overflow: hidden
}
#parent > div {
width: 3.5714%;
float: left;
text-align: center;
}
I want to offset the content of a div by 65px from the left, but keep it at 100% width. If I do this:
div{
margin-left:65px;
width:100%;
}
It will move the div over, but there will be that extra 65px on the other side from when it was moved over. How can I get rid of this?
Since divs are block elements, they expand width to fill available space automatically. Using width: auto will allow the left margin while letting the div fill the remaining width.
div {
margin-left: 65px;
width: auto;
}