I have an image gallery and I dont want give an extra class to third list item:
<div class="row">
<ul class="rowUl">
<li>ssss</li>
<li>ssss</li>
<li>ssss</li>
</ul>
</div>
and css
.row {
width: 620px;
clear: both;
overflow: hidden;
}
.rowUl {
width: 645px;
float: left;
}
.rowUl li {
width: 220px;
float: left;
}
but the third list item drop in other row. How can I solve this without extra class?
220 * 3 = 660,
rowUL = 645
thats 15 extra pixels pushing the floated div down.
Solutions:
Make rowUL width 660, make row width 660
OR:
make the rowUL li width 215
Try increasing the width from 645px to a greater value in .rowUl if feasible in your case.
You have 3 floated LI elements, each 220px wide. 3*220 = 660, but the containing element's width is only 645px, so the third one cannot fit in next to the 2nd one and falls to another row below the first one. If you want them all in one row, set .rowUl's width to 660px.
Also, I don't know if you're using some kind of CSS reset - if you don't, be aware of the fact that default margins and paddings of UL and LI elements can also affect this. You need to set them to 0 if you want to make sure that they don't.
You have exceeded width limit of inline elements by 645px within 660px (each 220px for all three elements)
You can do it by increasing width of outer elements more than 660px
Hope this helps
Myra
Related
I am using flex property to display the progress of work in an office. I have multiple rows of data displaying. But the child div width is showing differently on each row depends on a number of children inside the parent div. How to show every time equal width for all same values ?
Thank you 04FS for the information on flex-grow and flex-shirnk to make zero. I have changed the CSS for my flex box and given the width of each column in %. This solved my issue
#parent
{
width: 750px;
display: flex;
}
.grow {
width: 100%;
text-align:center;
white-space:nowrap;
}
Looking at the bottom example here, if you give .after-box a margin-top:5px it doesn't make a difference as it'll stay in the same location. But if you give .box a margin-bottom:5px it'll move the .after-box down. Why is it that on floated elements, their margin matters but other elements around them don't?
Hey margins don't move floated html elements, instead they push it away.
To give a fake margins on floated elements is to put the content inside another container then apply padding.
.outer {
float: left;
padding: 20px;
}
.inner {
//styles here..
}
I have a <ul> inside of a width: 100%; container.
Each <li> has width: 25%;.
I want to have a margin-left on the li elements, but this screws up the width %.
Here is the fiddle showing the issue: http://jsfiddle.net/u3hTW/
To 'correct the issue, I can apply box-sizing to the li elements and use padding instead of margin, but the 'kicker' is that I want the nth-child(1) to have no margin or padding which causes it it to look different from the rest of the li elements.
Here is a fiddle showing that: http://jsfiddle.net/u3hTW/1/
I am wondering if there is a better way to be approaching this. The goal is to maintain a % based width, with space between all but the first child.
I would suggest using a % for your width, and for your margins.
.list li {
float: left;
width: 23%;
margin-left: 2.66%;
}
.list li:nth-child(1) {
margin-left: 0%;
}
FIDDLE showing that approach
In general to get spacing between containers I prefer margin, because later you may need inner padding for something else, or run into cross-browser box-sizing issues with padding.
The thing is, you're already using your 100% by 4x25% width of each li element. So when you add the margin, the last one will 'jump', because < 25% of the container div remains.
What you can do is:
Make your li's a little smaller, like 23% or so, and use percentage for your margins. A little calculations is required to make sure everything is spaced apart evenly.
Use flexbox (please check if browsersupport meets your requirements)
A compleet guide to this relatively new css boxmodel can be viewed here, as done by Chris Coyier: http://css-tricks.com/snippets/css/a-guide-to-flexbox/
This is the formula to calculate the width of the columns with the method suggested by cjspurgeon:
w = 100 - 2mc
---------
c
Where:
w = width of the column
m = margin expressed in %
c = number of columns
The constant 100 = 100%, or total width of columns + margins. The constant 2 is the two margins considered (left and right)
So, say you want 6 columns with a margin of 1.7% left and right:
w = (100 - 2(1.7 * 6)) / 6
w = 13.2666%
Your selector would look like this:
.column {
width: 13.2666%;
margin: 1.7%;
float: left;
/* whatever else is required */
}
I would like to position 5 column blocks,each containing text in a row.I have tried to create a wrapper class which has a width of 1600px,a padding of 30px to the left and the right and two classes that will align content to the left and the right respectively,each of these classes are in nested divs within the wrapper class.I gave each div a width of 300px and a height of 300px,the first four divs align next to each other while the last one goes below and to the right.The CSS and HTML is here.
EDIT:
The major issue got fixed when:
.wrapper
{
width:1600px;
height:auto;
padding:0px 30px 0px 30px;
}
But this seems to exceed the screen resolution needing me to scroll horizontally to view all the content,how do I deal with different screen resolutions?
try to give width:1600px;
.wrapper
{
width:1600px;
height:auto;
padding:0px 30px 0px 30px;
}
http://jsfiddle.net/sKsZN/
Try using float:left and display:inline-block for all the column <div>. Also make sure that the total width of those column don't exceed to .wrapper's width.
You should use float:left for your .content-right class. http://jsfiddle.net/sDyC5/2/
Wrapper element css width property has set to wrong value. You must set the properly unit (px|%|em|ex). And also display: inline-block and float propeties should not use together.
What's the simplest solution to make four equally sized boxes that is displayed inline (horizontally) and is centered in the screen all through out responsively?
I have four divs with same sizes, displayed inline and is always placed in center, meaning they always have an equal margins on left and write of the screen. And i want it to be responsive. I already tried flex-box but i'm having trouble with browser compatibility with css3.
I don't know if this is the absolute "best" way. But something like this would definitely work.
div {
width: 22%; //adjust as necessary
margin-right: 4%; //adjust as necessary
float: left;
height: 5em; //adjust or remove as necessary
}
div.last { //alternatively you could consider using the :last-child selector
margin-right: 0;
float: right;
}
You will have to apply a class of "last" to the last div. Alternatively you could use div:last-child if they were all contained in a parent element.
Also, when adjusting the margin/width make sure they stay relative. widthx4 + margin-rightx3 should always = 100 (assuming no padding or borders).