I have the following js-fiddle. It's basically just a div that has a bunch of square child elements. The issue is that the div doesn't always stay centered. I've already set the following CSS:
.boutique-grid {
text-align: center;
margin-left: auto;
margin-right: auto;
}
I am not sure why it's not centering the child element div's. Any idea?
Remove float left from your .boutique-grid-column class. It will solve the issue.
The boutique-grid is centered, but it's 100% wide. You can set a width to for example, 710px;
.boutique-grid {
overflow: hidden;
width: 710px;
}
.boutique-grid {
text-align: center;
}
.boutique-grid-column {
...
margin: 0 auto;
}
Remove float:left; and this will work fine, you already have display:inline-block; set so no need to float the element.
http://jsfiddle.net/wy7rd/3/
This is what the spec says about float:
The element generates a block box that is floated to the left. Content flows on the right side of the box, starting at the top (subject to the 'clear' property).
This is why .boutique-grid-column becomes block when float is specified and ignores text-align.
Set width of div and image.
.boutique-grid {
width: 300px;
text-align: center;
margin-left: auto;
margin-right: auto;
}
Related
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 have two inline-blocks elements (which are side by side). When I set top margin of one of them, both move. Why?
JSfiddle
HTML
<div></div>
<div></div>
CSS
div {
width: 150px;
height: 150px;
display: inline-block
}
div:first-child {
background: #279B61;
margin-top: 3em
}
div:last-child {
background: #CC3333
}
The default vertical-align causes the bottom of the elements to line up.
If you push one down, it increases the height of the line they both sit on.
Use vertical-align: top (for example) to change that.
Because the default vertical alignment of inline elements is baseline. Setting vertical-align:top will pull the second div back up.
div {
width: 150px;
height: 150px;
display: inline-block;
vertical-align:top;
}
jsFiddle example
I am trying to make a div with text and a div with a button fit side by side. It works fine until you make the screen really narrow. Is there a way to force them to be on the same line and for the first div to shrink to accommodate the min-width of the second?
http://jsfiddle.net/C3877/9/
To see what I mean, resize the window, reducing the width, until the div with the button is forced onto the second line. That is what I'd like to prevent.
Note: I only care if a suggested fix works properly in Chrome.
Instead of floats, you could use display: inline-block. This will keep things all on one line, and respect the min-width as well.
Inline-block fiddle: http://jsfiddle.net/C3877/8/
In addition, since you only care about Chrome, you could look into flexible boxes
A (quick) flex fiddle here: http://jsfiddle.net/C3877/11/
You can use negative margin-left for the floated right element. Note that this solution keeps using float for both the left and right divs, without using float, you have dozens of solutions (as some of other answers pointed out).
#right_div {
...
margin-left:-100%;
}
Note that all the next content should be wrapped in a block element and use clear:both. I also added a sample of such an element with background:green in this DEMO.
Appending this does the trick I suppose:
#media (max-width:515px) {
#left_div { width: 100%; margin-right: -100px }
}
UPDATED
You could use margin and absolute positioning:
CSS
#parent_div {
width: 100%;
height: 10%;
position: relative;
min-width: 40px;
}
#left_div {
width: 80%;
min-width: 100px;
height: 80%;
float: left;
background-color: #000;
color: #FFF;
}
#right_div {
width: 15%;
min-width: 100px;
float: right;
background-color: blue;
position:absolute;
right: 0px;
}
input[type=button] {
font-size: 2rem;
}
SEE DEMO: http://jsfiddle.net/C3877/19/
You will have to play with some of the css to get it just right when you move it on your website. But this is a sure quick fix.
I want to define a class such that to which ever element I apply that class that element gets horizontally centred in its parent container.
The class can be applied to img , iframes or divs each of which could be of different size.
Is it possible to have such one class for all of them?
And how can achieve this probably the solution would require setting right, left margins automatically equal to each other and according to the size of the elements and left over space? But how that can be achieved.
Closest I have been able to reach is this but it doesn't work:
.centreThis{
margin: 0 auto;
max-height: 964px;
max-width: 680px;
overflow: hidden;
border: 10px solid #ddd;
}
Using a combination of CSS rules to address various elements:
.center {
width:auto;
text-align:center;
margin-left:auto;
margin-right:auto;
position:absolute;
left:50%;
transform: translate(-50%, 0%);
-webkit-transform: translate(-50%, 0%);
}
This will center align p, img, div and iframe elements, and others. Here's the full demo.
You can use this centered class:
.centered {
display: block;
margin-left: auto;
margin-right: auto;
}
Work for:
<div> tag;
img tag
iframe tag
JSFIDDLE
EDIT: if you put some text right inside <div> with that tag, the text will not center, cause you don't have setted text-align: center property.
HOW CAN I CENTER TEXT INSIDE CENTERED DIV?
Simple, just add a <p> element inside that div and CSS:
.centered p {text-align: center;}
Try using text-align: center; on a container element and display: inline-block; on a child element that you want to center.
Also, note that the margin: 0 auto; method only works when you have a defined width.
I have a container div and 5 child div's with
{display: inline-block}
so they appear next to each other. Each of the child div's have a height of 20px, but the container grows to a height of 24px. Why does this happen?
Fiddle: http://jsfiddle.net/VHkNx/
Inline block elements still take care of the line-height/font-size. So adding this:
line-height: 0;
to #container will fix it.
Demo
Try before buy
Once you're using the inline-block display, your elements behaves similarly to words and letters. Whitespaces and line heights are rendered as well and it might cause some unexpected results.
One way of solving this is to give the container font-size: 0 setting (of course you can still give the child elements themselves their own font size).
jsFiddle Demo
P.S - line-height: 0 will also work.
One simple way of fixing this is to add vertical-align: top to the child elements:
.thing {
vertical-align: top;
display: inline-block;
background-color: Red;
height: 20px;
width: 18%;
margin-left: 1.25%;
margin-right: 1.25%;
}
This way, you don't need to adjust line heights or font sizes.
As noted earlier, a similar layout can be realized using floats. Both approaches are valid.
See demo at: http://jsfiddle.net/audetwebdesign/74Y2V/
Inline-block elements are placed as block on the base line of a text line, as they are inline elements, so it's the space from the base line to the bottom of the text line that takes up space.
You can use floating elements instead of inline elements:
#container {
background-color: Green;
width: 500px;
overflow: hidden;
}
.thing {
float: left;
background-color: Red;
height: 20px;
width: 18%;
margin-left: 1.25%;
margin-right: 1.25%;
}
#first {margin-left: 0px;}
#last {margin-right: 0px;}
Demo: http://jsfiddle.net/VHkNx/2/
Easiest way is not to give them display: inline-block, but use float: left; . All elements will float next to each other. Good luck!