I want to center a set of images that are lined up side by side. Despite using margin: auto the images are still lined up to the left. I read in another thread to add display: block but that's not working either. Thoughts?
<div style="margin: auto; display:block;">
<p>
<img src="/wp-content/uploads/2015/05/tca_horizontal_blue.gif"
style="float: left;" alt="" width="200px" height="93px" />
<img src="/wp-content/uploads/2015/05/nea-logo-e1431885075484.png"
style="float: left;" alt="" width="218px" height="93px" />
<img src="/wp-content/uploads/2015/05/Arts-Committee-color1-e1431885177830.png"
style="float: left;" alt="" width="155px" height="93px" />
</p>
</div>
According to §10.3.3, margin: 0 auto centers block-level elements because
If both 'margin-left' and 'margin-right' are 'auto', their used values
are equal. This horizontally centers the element with respect to the
edges of the containing block.
However, this is useless if width is auto, because then the block will fill its containing block:
If 'width' is set to 'auto', any other 'auto' values become '0' and
'width' follows from the resulting equality.
Instead, you could use a tabular display. According to §17.5.2,
if the margins of a table are set to '0' and the width to 'auto', the
table will not automatically size to fill its containing block.
However, once the calculated value of 'width' for the table is found
(using the algorithms given below or, when appropriate, some other UA
dependent algorithm) then the other parts of section 10.3 do apply.
Therefore a table can be centered using left and right 'auto' margins,
for instance.
div {
display: table;
margin: 0 auto;
}
div {
display: table;
margin: 0 auto;
border: 2px solid blue;
}
span {
display: inline-block;
height: 20px;
width: 20px;
border: 2px solid red;
margin: 10px;
}
<div>
<span>1</span>
<span>2</span>
</div>
However, this may not be necessary. You say you want to center the images. Therefore, instead of attempting to center the block container, you can center its content, using §16.2 text-align:
This property describes how inline-level content of a block container
is aligned.
div {
text-align: center;
}
div {
text-align: center;
border: 2px solid blue;
}
span {
display: inline-block;
height: 20px;
width: 20px;
border: 2px solid red;
margin: 10px;
}
<div>
<span>1</span>
<span>2</span>
</div>
You need to set the width of the div, as well.
<div style="margin:auto;display:block;witdth:500px;">
Here's a demo: http://jsfiddle.net/qqyjgnhw/1/
Highly recommend reading about the box model of CSS. It makes a lot more sense after you take the hour to know what's going on under the hood.
If you remove float:left on img elements, and add display:block they will get centered...
When an element is floating, it is totally out of the flow.
Related
We want the layout that's shown below but don't know how to center the "Center here" text like that. Currently, we're centering it according to the width of the parent container. It's appearing too far to the right. In this example, only two items fit on a row, thus leaving empty space to the right of the items. We want the parent container's width to be as per the min width of the child flexbox to center the text above it. The flex box is flex row with wrapping for items that don't fit in. We basically want to ignore that extra space on the right where the item can't fit and set the width of the parent div accordingly
The blue color represents the flex-box's width. Here's the tailwind CSS classes that we're currently using:
className="flex flex-row overflow-x-hidden flex-wrap 3xl:flex-shrink 2xl:block 2xl:grid 2xl:grid-cols-3 3xl:grid-cols-3 justify-items-end "
Hard no sample code, but here I tried my best, hope it helps
This is my code sample, you can try it :
body{
padding: 5%;
}
.container{
border: 5px solid #000;
width: 300px;
height: 400px;
}
.container-box{
margin: auto;
display: flex;
flex-wrap: nowrap;
padding: 10px;
width: 200px;
height: 200px;
}
.box-1, .box-2{
margin: auto;
border: 5px solid #000;
width: 40%;
height: 40%;
}
<div class="container">
<div class="container-box">
<div class="box-1"></div>
<div class="box-2"></div>
</div>
</div>
There are multiple ways posted here to uncollapse a vertical PARENT margin, but nothing about uncollapsing vertical margins of adjacent elements. The only solution I found was in this answer (back in 2009):
<div style="overflow: hidden; height: 0px; width: 0px;"> </div>
Almost 7 years passed since there. Is some better way to do this (possibly using some CSS3)?
Basically, suppose you have: http://jsfiddle.net/ok2u3o3c/
<div class="one"></div>
<div class="two"></div>
div {
width: 300px;
height: 200px;
}
.one {
margin-bottom: 10px;
background-color: blue;
}
.two {
margin-top: 20px;
background-color: red;
}
What would be the most elegant way to make the distance between these 2 boxes 30px instead of 20px (where the first margin contributes 10px and doesn't collapses)?
Let's start with the relevant documentation explaining the behavior of collapsing margins:
8 Box model - 8.3.1 Collapsing margins
In CSS, the adjoining margins of two or more boxes (which might or might not be siblings) can combine to form a single margin. Margins that combine this way are said to collapse, and the resulting combined margin is called a collapsed margin.
The following rules apply, which means that there are a things that you can do to prevent the margins from collapsing for sibling elements:
Margins between a floated box and any other box do not collapse (not even between a float and its in-flow children)
Therefore if you float the elements with collapsing margins, they will no longer collapse:
.collapsing-margins {
margin: 100px 0;
background: #f00;
float: left;
width: 100%;
}
<div class="parent">
<div class="collapsing-margins">Element</div>
<div class="collapsing-margins">Element</div>
</div>
Margins of inline-block boxes do not collapse (not even with their in-flow children).
Therefore you could also add change the display of the elements to inline-block:
.collapsing-margins {
margin: 100px 0;
background: #f00;
display: inline-block;
width: 100%;
}
<div class="parent">
<div class="collapsing-margins">Element</div>
<div class="collapsing-margins">Element</div>
</div>
I am trying to understand why the .item-wrap in the css below only calculates it's width *as if .floatleft2 wasn't there, and yet the .items contained by .item-wrap clearly are aware that .floatleft2 is there.
I want the .containingbox to "shrink wrap" the content, but not for the .items to wrap "prematurely" i.e. while there is still extra screen space. (see 'working' fix below).
I have already found the workaround, but what specification in CSS causes this interaction between .floatleft2, .item-wrap, and .item such that the .item-wrap width isn't wide enough to incorporate all the .items?
jsfiddle demo (code reproduced below)
jsfiddle demo with 'working' inline fix
<body>
<h1>float:left on .containingbox, with item-wrap, with floatleft2, causes premature wrapping of .item</h1>
<div class="containingbox">
<div class="floatleft2"></div>
<div class="item-wrap">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</div>
</body>
body {
margin: 20px;
padding: 0;
font: normal 85% arial, helvetica, sans-serif;
color: #000;
background-color: #fff;
}
.containingbox {
height: 200px;
border: 1px solid #000;
float: left;
}
.item-wrap {
border: 1px solid #0FC;
height: 3px;
}
.item {
border: 1px solid #F09;
width: 50px;
float: left;
position: relative;
margin: 0 10px 0 0;
height: 75px;
}
.item::before { content: "item"; position: absolute; }
.floatleft2 {
height: 75px;
background-color: #000;
border: 1px solid #000;
float: left;
margin: 0 10px;
display: block;
width: 50px;
}
When you float .floatleft2 but not .item-wrap, .floatleft2 is taken out of the normal flow of the container box (which gets its own block formatting context from being floated itself), and .item-wrap is laid out as though .floatleft2 were not there. Since .item-wrap is not floated, it behaves like a regular block-level element, using the auto width and stretching to fit the container as per section 10.3.3.
The reason why the container is sized horizontally to just fit .item-wrap and its floated items is because, when .floatleft2 is taken out of the normal flow of the container, the container no longer needs to account for the size of .floatleft2. It only accounts for the contents of .item-wrap, which are themselves also floated.
The width of a floating element, when no explicit width is specified (it uses the auto width), is shrink-to-fit, according to section 10.3.5. CSS2.1 does not say how to implement shrink-to-fit, but it does say that an implementation should use shrink-to-fit. In this case, the container is shrunk to just the minimum width needed to fit the floating items on one line. The width of .item-wrap is never relevant except that it should stretch to fit within the bounds established by the container, as mentioned above.
What happens then is that when .floatleft2 is introduced, the floating items float to the left of that element (the same fundamental behavior you see when floating the items themselves), regardless of the layout of .item-wrap or the container. This causes some of the items to wrap to the next line since neither container element changes its size to account for .floatleft2.
you are making the div class from block level element to inline element.
you should use float:left; and remove the display:inline
.item-wrap {
/*display: inline;*/
float: left;
border: 1px solid #0FC;
height: 3px;
}
Here is the Working Demo. http://jsbin.com/vicusesu/1/edit
It is because you have float: left on .float-left2 and .item but not on .item-wrap. This effectively removes all floated items from item-wrap (they are floated) while it still keeps the same width as if they were there.
If you add a float (left or right) to your .item-wrap you will not have this issue.
I have such html code:
<body style="text-align: center;">
<div style="background-color: #014156; text-align: center; width: 985px; margin:6px auto;">
<div style="background-color: #a6a6a6; width: 975px; background-image:url('shadow.gif'); background-repeat:repeat-x; background-position: center top; margin: 6px; overflow:hidden;">
<div style="float:left; width: 674px; text-align: center; color:#056c02; margin-left: 5px; margin-top: 10px; font-size: 20opx;" title="Product title"><span style="color: #d2ff00">"</span><span style="background-color: #d2ff00">[[Title]]</span><span style="color: #d2ff00">"</span><p style="text-align: left; font-size: 14px; margin-bottom: 5px;" title="Description">[[Description]]</p></div>
<div style="float:left; width: 301px; text-align: center; " title="General information (Image, stock, price)">[[Picture1]]<BR><SPAN style="FONT-SIZE: 9px; background-color: #FFFFFF;">Image is for illustrative purposes only. Please refer to product description.</SPAN></div>
</div>
Which results:
In Gray backgrounded div I need that two divs would align inline, and result would be like this:
What should I change, where is the problem?
P.s. my styles is described in tags because I dont have ability to use css for this because of some host reasons. So please don't start telling me about it :)
You need to lower the width of either the left div or the right div.
Lowering the first div to 650px for example fixes the problem.
Your logic was right: 674px + 301px does equal 975px but you didn't account for margins and padding and borders in those values. Make the "real" width less than or equal to 975px
Instead of float: left, try with display: inline-block, that should work.
You have a p tag which is a block lined up next to and inline span. Add either inline or inline-block to the p tag, depending on your requirements. Another possibility is you could change the p to a span.
I have 2 divs inside a container, Each of the inside divs are floated to the left and right, I want to make 2 columns for data inside the main content div.
Currently, text leaks out the bottom of content-left and content-right, even though they are contained within content.
Here is a jsfiddle
<div id="content">
<div id="content-left">I want to put content in here<br/><br/><br/>This is outside? why? </div>
<div id="content-right">and more in here</div>
Maybe other content here, inside the content
</div>
And the CSS
#content-left{
width: 50%;
border: 1px dotted #aaa;
float: left;
}
#content-right{
width: 49%;
float: right;
border: 1px dotted #aaa;
}
#content{
background-color: #eee;
width: 95%; /* Width of Main Content Div, % for Fluid*/
height: auto;
max-width: 1350px; /*Max width, To wide on big monitor*/
margin: 0 auto;
padding: 10px;
padding-left: 20px;
padding-right: 20px;
}
Also, any tips about floating items would be great and might earn reps if I find them useful, I thought I had it mastered but obviously not! :P
You just need to add a clearing br inside the last div
Maybe other content here, but this should be below the 2 above divs in the rendered view.
<br style="clear:both;" />
</div>
http://jsfiddle.net/jasongennaro/sahbz/9/
This is happening because the floated elements are taken out of the document flow.
Currently, text leaks out the bottom of content-left and
content-right, even though they are contained within content.
You need to "clear/contain your floats", more information here: http://www.ejeliot.com/blog/59
One simple way to do that is to add overflow: hidden to #content.
See: http://jsfiddle.net/sahbz/8/
Pure CSS
.content:after {
clear: both;
content: '';
display: block;
}