I'm struggling to get my 6 circles centered horizontally to the middle of the page.
I tried to put them in a .middle DIV with display: block and auto margins but no success - looks like they are aligned to the left side of .middle
http://jsfiddle.net/376wC/
Many thanks for your help
.middle {
width: 980px;
height: 600px;;
display: block;
margin-left: auto;
margin-right: auto;
background: #ccc;
}
jsFiddle Demo
This is the required change:
.middle {
width: 780px;
}
You can use inline-block, you need to adjust the size of the circle + margins so that only 3 will fit on a row. So in my example, the circle is 10px wider and taller and there are 4 extra pixels in between each circle:
http://jsfiddle.net/376wC/5/
Also, you can get rid of the circle_5px_marging class and just put equal left and right margin on the circles (see my example).
Related
Here is my site, http://www.defensionem.com/schwellenpflug/
I want to shift the text from both the directions in the middle. So as the text is in the center and is easy to read and looks good. I can only add custom CSS so please advice.
Using Firebug,
I tried this:
.main-content{
padding-left:250px;
}
Which works but it isn't exactly in the middle. I tried changing the padding values and noticed it also has to do something with the sidebar side.
I'm confused.
I tried text-align:center; but it only aligns the format of the text and doesn't bring it in the middle.
try this style
.main-content {
display: block;
width: 80%; // if fixed width then replace 80% with 600px;
margin: 0 auto;
}
To align DIV in center
div {
display: block;
width: 80%; //works only if width is less than 100% or fixed like 250px
margin : 0 auto;
}
I'm trying to render a 3 column design with the following :
middle fixed width at 660px
left and right half of the remaining but with min-width : 120px
middle div should be centered on the screen
Everything I'm finding is about fixing left and right column and letting fluid the middle one, but I want the exact opposite.
I've partially achieved my goal using
display: inline-block;
vertical-align: top;
Here's the fiddle.
What's missing is the right resizing of the right and left div. When the window get resized, 660/sizeofwindow is changing, so the value in percentage of the left and of the right div are no longer correct.
Use calc to achieve this.
It is a native CSS way to do simple math right in CSS as a replacement for any length value.
Please note that calc does not work with all browsers.
Write:
#left, #right {
min-width:120px;
width:calc(50% - 330px); // half of 660px
}
As you are using display:inline-block, make sure you don't leave any space between your div's because inline-block leaves white-space between elements.
See updated fiddle here.
http://jsfiddle.net/hdt75/
.fenetre {
text-align: center;
width:1200px;
background-color: grey;
margin: 0 auto;
}
If you want table-like behavior, you should use display: table-cell in your CSS:
.fenetre {
display: table-row;
}
.section {
display: table-cell;
}
#right {
width: 50%;
}
#middle {
min-width: 660px;
max-width: 660px; // just 'width: 660px' won't be enough here
}
#left {
width: 50%;
}
http://jsfiddle.net/mblase75/zL9cn/
I would like to create a div (within a main wrapper for a website) to contain 2 div to fill in the previously mentioned div. I have actually done this already....but my problem is that the 2 smaller divs dont align nor stay fixed in the main div. How is this even possible if they are confined to a main div?
Here is what I have done so far and there this issue is present: http://jsbin.com/tifuhute/17/
The text and the map (both with black borders) should be in the red box (which is the main div) and shouldnt move under no circumstances.
The sizing is a little off. (#column1 (300px) + #column2 (900px) = 1200px not 1198). Use box-sizing:border-box; to make it easier
#container {
width:1200px;
...
}
#column1 {
width:300px;
box-sizing:border-box;
...
}
#column2 {
width:900px;
box-sizing:border-box;
...
}
http://jsbin.com/tifuhute/18/
Your divs have fixed width and height. Your container is 1198px wide, while your inner divs sum up 1200px, thus wrapping as they don't fit in their parent's 1198px width.
Give both your divs "display: inline-block". This will make them line up side by side as long as their width is not greater than that of the red box.
#text{
display: inline-block;
width: 30%;
#map{
display:inline-block;
width: 69%;
}
You will want to float the inner divs.
Because div elements display as block they won't follow each other horizontally in-line. Using float will put them next to one another.
Don't forget to account for the border width of each inner element so they fit inside the wrapper. In the below example the larger div has a width of 646px instead of 650px because 4px were used for the right and left border of the inner div's combined.
<div id="wrapper">
<div id="small-div"></div>
<div id="large-div"></div>
</div>
#wrapper{
width: 900px;
height: 300px;
padding: 0;
margin: 0;
border: 1px solid red;
}
#small-div, #large-div{
float: left;
border: 1px solid #000;
}
#small-div{
width: 250px;
height: 300px;
}
#large-div{
width: 646px;
height: 300px;
}
JSFiddle example
Look at my html + css code: http://jsfiddle.net/nP39E/1/
I'll explain if don't understand what I want to achieve:
I want a page with a div which floating right and takes 250px width and a div that takes width of the rest of the document.
In the left div, you can see that I have some other floating elements, and their heights are effected from the right div. You can see the first (red) row with height that align with the right bar's height and has nothing to do with the real content of its content.
I use group class in order to handle the common floating problem: .group:after { content: ""; display: table; clear: both; }
Can you tell me why it happens?
I just changed CSS for the content div from the last answer:
.content {
background: #888;
padding: 10px;
position: absolute;
right: 270px;
left: 0;
}
http://jsfiddle.net/nP39E/4/
What you think?
display: table isn't meant to be used for layouts like this, it's more useful for specific equal-height situations.
Properly floating the divs and not using the margin-right to push the left div will work:
.content {
background: #888;
padding: 10px;
float: left;
width: 250px;
}
Fiddle
You are giving margin-right:270px which is wider than the available space,So just remove that. Also you should make content float:left.
.content {
background: #888;
padding: 10px;
float:left;
}
JSFiddle : http://jsfiddle.net/ankur1990/nP39E/3/
I'd like to have a div that is centered on the document. The div should take all the space it can to display the content and the content itself should be aligned to the left.
What I want to create is image gallery with rows and columns that are center and when you add a new thumb it will be aligned to the left.
Code:
<div id="out">
<div id="inside">
<img src="http://www.babybedding.com/fabric/solid-royal-blue-fabric.jpg"/>
<img src="http://www.babybedding.com/fabric/solid-royal-blue-fabric.jpg"/>
<img src="http://www.babybedding.com/fabric/solid-royal-blue-fabric.jpg"/>
<img src="http://www.babybedding.com/fabric/solid-royal-blue-fabric.jpg"/>
<img src="http://www.babybedding.com/fabric/solid-royal-blue-fabric.jpg"/>
</div>
</div>
and the CSS:
img {
height: 110px;
width: 110px;
margin: 5px;
}
#out {
width: 100%;
}
#inside {
display: inline-block;
margin-left: auto;
margin-right: auto;
text-align: left;
background: #e2e2f2;
}
Live version here: http://jsfiddle.net/anPF2/10/
As you will notice, on right side of "#inside" there is space that I want to remove, so this block will be displayed until the last square and all of it will be centered aligned.
EDIT:
Please view this photo: https://www.dropbox.com/s/qy6trnmdks73hy5/css.jpg
It explains better what I'm trying to get.
EDIT 2:
I've uloaded another photo to show how it should adjust on lower resolution screens. notice the margins on the left and right. This is what I'm trying to get (unsuccessfully so far :\ )
https://www.dropbox.com/s/22zp0otfnp3buke/css2.jpg
EDIT 3 / ANSWER
well, thank you everybody for trying solve my problem. I solved this problem using JS, with a function that listens to a screen resize event. The functions checks the size of the right margin and add padding to the left so all the content is centered. I didn't find a solution using CSS. If you have one, I'd very much like to know it.
Thanks eveyone!
Specify a width for #inside to center it. I used width: 120px. Fiddle: http://jsfiddle.net/anPF2/7/
Additionally, CSS should be used for the height and width of images, not attributes such as height="300". The fiddle reflects this change.
use of display:inline-block takes extra margins. To remove those set font-size:0px to the #out container. See the demo
This is what you want to achieve? demo
img {
height: 110px;
width: 110px;
margin: 5px;
display: inline-block;
}
#out {
width: 100%;
margin: 0 auto;
position: relative;
border: 1px solid red;
}
#inside {
position: relative;
background: #e2e2f2;
}
You shouldn't use Pixels when laying out your css, it makes it very rigid and causes possible problems for people with high resolution screens and low resolution screens. Its best to declare it as a % or em (% is still probably slightly better when working with widths, but em for height is perfect)
First, the "outer" div must be declared to be smaller than what it is inside. For instance if "outer" is inside body:
#outer{
width: 100%;
}
#inside{
width: 80%;
margin-left: auto;
margin-right: auto;
}
#inside img{
height: 110px;
width: 110px;
margin-left: 1%;
margin-right: 1%;
margin-top: 0.5em;
float: left;
}
Okay so, since "inside" is 80% of "outer"'s width, the margin-left:auto, margin-right: auto together make the "inside" div center within the "outer".
Setting the float property to left moves all the imgs of inside to always try to move left while it can.
EDIT: I fixed this after looking at your picture you provided.
I haven't tested this but I believe it should work, let me know if you are having more problems.
To make the boxes not go the entire width of the page, try setting the width less than 100% on #out and add margin:auto; to center it.
#out {
width: 90%;
margin:auto;
}
http://jsfiddle.net/anPF2/36/