Is it possible to have 3 columns, all equal in width with 2 columns in between, all be fluid? Everything I can find shows one column fixed, or they have different width. I need them all to be the same. No matter what I do on this page, the last li doesn't come all the way to the edge of the container. If I enlarge the % of the li then it doesn't fit in smaller resolutions. Thanks!
Page example is here
CSS is here
It looks like you already got an answer on how to get it working, but you'll quickly run into another problem if you're going to have any sort of margin or border on these columns.
Those width percentages? They don't include border/margin - so if you add either of those, you'll once again have columns overflow.
Solution? Make sure to set box-sizing: border-box; - if you haven't heard of it before, Google it. It's magical!
your question puzzles me a bit. On the one hand, this example shows what you sound like you're asking for:
http://jsfiddle.net/JuamW/
On the other hand, the actual example of your site shows a fixed-width situation where your columns have no requirement to be fluid. If the above example doesn't give you what you need, could you provide some more context?
I would say it's all about calculating the right percentages.
To start fresh, remove the borders and margins on all three columns. Then make their widths 33.3333% so they will all fit perfectly inside their container.
Looking at your CSS I can see you have a margin (left and right) of 3.75% on the middle column, so you must re-calculate your column widths to 100 - (3.75 * 2) / 3 = 30.833333%.
Secondly, switch your border to an outline to prevent unnecessary width being added to your layout.
Lastly make your imgs 100% width so they fit inside their containers nicely.
Should be done after that, I used Firebug to perform all those changes on your site and it looks like it worked out.
If you want to bring the last li out add:
#categories-wrapper ul li.students{
float: right;
}
#categories-wrapper ul li.fine-art{
float:left;
}
replace categories-wrapper ul li:nth-child(2) with:
#categories-wrapper ul li.gd {
margin-left: 4.25%; /* 36px / 960px */
float: left;
}
And modify this:
#categories-wrapper ul li {
width: 30.20833%; /* 290 / 960 */
border: 1px solid #333;
position: relative;
}
Is that what you're looking for?
Related
I have devolopped a responsive website with Twitter Bootstrap 3. However i have noticed that there is a scroll bar at the bottom of my screen due to a right space on the page. Even though i used
body {
margin:0px;
margin-top:0px;
padding:0; margin:0;
margin-right: 0;
}
I still have a right space and a scroll bar under my page as shown in the picture below
Please How to remove the right space from a bootstrap built website ?
i looked in to it what i think is, its the navigation bar which is causing it.
try reducing the px for nav bar. look at the picture , reduce the px from 1903 to 1980 may be !! let me know what happens
First of all, elements with classes articles_text2 and articles_text4 aren't placed properly, they create some extra space on the right. For example, you can set them left: 50%;. However, I'd suggest that you re-define positions for all articles_text elements because values like 57% and other look like some magic numbers taken from nowhere.
Secondly, you should remove padding: 0; from #full-width because it breaks Bootstrap Grid System. What I can suggest in order to remove left and right padding is to do the following trick:
[class*="col-"] {
padding-left: 0 !important;
padding-right: 0 !important;
}
It should help.
I have a bunch of toggle buttons with labels underneath. If the labels for a button get to be too long then what should be the first button of the next row will get stuck on that label.
Heres my code:
https://jsfiddle.net/Android272/c150305z/
I have looked it up and everyone wants to know how to make their site like pintrest. I don't want this to look like that, I want my second and third rows not to be stuck on the first.
some people suggested to place
display: inline-block;
somewhere but everywere I place it it does not seem to fix it.
That's because you're using unequal heights in your divs.
Set a height to your third section's divs and it will remain equal in row:
section:nth-child(3) div {height:110px}
JsFiddle
Edit: Another way is to save the spacing by adjusting the p but still needs to use height for the parent.
This should do:
section:nth-child(3) div {
height:100px; /* Same amount of space as other divs */
}
section:nth-child(3) div p {
margin-top:3px;
line-height: 15px;
}
JsFiddle
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 wanted to using a flexible horizontal list menu, and I found one on github that came with a collapsing menu at a certain breakpoint. I didn't need the collapsing menu so I got rid of it. I've been modifying the menu to cater to my layout. There are a couple issues that I can't seem to figure out.
There seems to be a left margin to the menu that I want to get rid of.
On the right side of the menu, while shrinking the browser, the last menu item seems to get overlapped instead of pushed in.
I would like to reduce the margins between list items
Normally this wouldn't be a problem for me, but I've not really worked much in percentages.
.flexnav {
overflow: hidden;
margin: 0 auto;
width: 100%;
max-height: 0;
}
FIDDLE
Add padding: 0; to .flexnav style definition.
To remove padding just use css:
padding:0;
You mention "unwanted", so a tip from what I usually do is, at the top of the style sheet I write this out:
*{
padding:0px;
margin:0px;
}
This will remove padding and margin from all things that have padding or margin by default, so you will no longer have "unwanted" padding or margin, instead you can separately add padding and margin to things you actually want.
I use this approach on all websites I make.
This question already has answers here:
Image inside div has extra space below the image
(10 answers)
Closed 7 years ago.
In Firefox only my video thumbnails are displaying mysterious 2-3 pixels of white space between the bottom of my image and its border (see below).
I've tried everything I can think of in Firebug with no luck.
How can I remove this white space?
You're seeing the space for descenders (the bits that hang off the bottom of 'y' and 'p') because img is an inline element by default. This removes the gap:
.youtube-thumb img { display: block; }
You can use code below if you don't want to modify block mode:
img{vertical-align:text-bottom}
Or you can use following as Stuart suggests:
img{vertical-align:bottom}
If you would like to preserve the image as inline you can put vertical-align: top or vertical-align: bottom on it. By default it is aligned on the baseline hence the few pixels beneath it.
I've set up a JSFiddle to test several different solutions to this problem. Based on the [vague] criteria of
1) Maximum flexibility
2) No weird behavior
The accepted answer here of
img { display: block; }
which is recommended by a lot of people (such as in this excellent article), actually ranks fourth.
1st, 2nd, and 3rd place are all a toss-up between these three solutions:
1) The solution given by #Dave Kok and #Hasan Gursoy:
img { vertical-align: top; } /* or bottom */
pros:
All display values work on both the parent and img.
No very strange behavior; any siblings of the img fall where you'd expect them to.
Very efficient.
cons:
In the [perfectly valid] case of both the parent and img having `display: inline`, the value of this property can determine the position of the img's parent (a bit strange).
2) Setting font-size: 0; on the parent element:
.parent {
font-size: 0;
vertical-align: top;
}
.parent > * {
font-size: 16px;
vertical-align: top;
}
Since this one [kind of] requires vertical-align: top on the img, this is basically an extension of the 1st solution.
pros:
All display values work on both the parent and img.
No very strange behavior; any siblings of the img fall where you'd expect them to.
Fixes the inline whitespace problem for any siblings of the img.
Although this still moves the position of the parent in the case of the parent and img both having `display: inline`, at least you can't see the parent anymore.
cons:
Less efficient code.
This assumes "correct" markup; if the img has text node siblings, they won't show up.
3) Setting line-height: 0 on the parent element:
.parent {
line-height: 0;
vertical-align: top;
}
.parent > * {
line-height: 1.15;
vertical-align: top;
}
Similar to the 2nd solution in that, to make it fully flexible, it basically becomes an extension of the 1st.
pros:
Behaves like the first two solutions on all display combinations except when the parent and img have `display: inline`.
cons:
Less efficient code.
In the case of both the parent and img having `display: inline`, we get all sorts of crazy. (Maybe playing with the `line-height` property isn't the best idea...)
So there you have it. I hope this helps some poor soul.
I found this question and none of the solutions here worked for me. I found another solution that got rid of the gaps below images in Chrome. I had to add line-height:0; to the img selector in my CSS and the gaps below images went away.
Crazy that this problem persists in browsers in 2013.
Had this prob, found perfect solution elsewhere if you dont want you use block just add
img { vertical-align: top }
.youtube-thumb img {display:block;} or .youtube-thumb img {float:left;}
Give the height of the div .youtube-thumb the height of the image. That should set the problem in Firefox browser.
.youtube-thumb{ height: 106px }
As stated before, the image is treated as text, so the bottom is to accommodate for those pesky: "p,q,y,g,j"; the easiest solution is to assign the img display:block; in your css.
But this does inhibit the standard image behavior of flowing with the text. To keep that behavior and eliminate the space. I recommend wrapping the image with something like this.
<style>
.imageHolder
{
display: inline-block;
}
img.noSpace
{
display: block;
}
</style>
<div class="imageHolder"><img src="myimg.png" class="noSpace"/></div>