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
Related
I have a layout as shown in this fiddle: https://jsfiddle.net/4dbgnqha/4/. For reasons that you can read about in this post, I don't want to change the way the page is laid out.
Now, it works fairly well, but the issue is that when I add a border to the bottom of the .item divs, I realize that they don't span the full width of the page. As you can see in the above fiddle, the second .item down doesn't have enough content to fill the width, so its border doesn't reach the full width.
I thought I could fix this by just adding .item { width: 100%; }, but when I do that, the image gets added enough additional width to center the p, which looks really weird. Demo of that: https://jsfiddle.net/4dbgnqha/7/
I know it will fix if I add a set width to the image, but as I mentioned in my original post, I want it to be really flexible, able to have many image widths. I also know that if I wrap the image in an element and set that element to a really small width, like 1px, it will work, but that seems like a hack, and the reason I'm doing this stupid table layout in the first place is that I'm trying to avoid any such hacks.
How can I fix this issue?
You can add this into the CSS, it's a hack, but works very well with table layout.
.item p {
width: 100%;
}
https://jsfiddle.net/4dbgnqha/8/
you need to add width 100% to the .item p element so it gets the maximum available width, otherwise that element will get width:auto. So just add width:100% like this:
.item p {
margin: 0px;
display: table-cell;
vertical-align: top;
width: 100%;
}
edit: well, now I see it was already answered, but for anyone looking for info, this is why it happens
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.
I am working on the following website http://bestofdesigns.be/studioregenbogen/index.html.
Can somebody please look at the css and tell me why the footer is not attached to the content and why there is a gap between the menu and the contentwrapper?
I have looked at this for 2 days and cannot seem to find what goes wrong.
Thanks,
Ben
#footer p {
padding-top: 5px;
margin: 0;
}
why there is a gap between the menu and the contentwrapper?
The gap is due to the margin applied by default by each browser to the list <ul> element and the title <h1>.
Remove it or adjust it
Screenshot
hi now give to #footer overflow:hidden and give to your footer p tagmargin :0;`
as like this
#footer{
overflow:hidden;
}
#footer p{
margin:0;
}
I am suggesting one more thing did you ever opened your design using firebug and checked how your middle content looks. It's bad design. Use div tags extensively don't use padding much.In the body style put text-align:justify property.
Your error is in
#footer p {
padding-top: 5px;
margin: 0;
}
Divide the content wrapper class into two vertical div classes and then divide the below vertical classes into another two vertical classes. Divide the first vertical tag into two horizontal div classes. In that put your image in first horizontal tag and in second your paragraph. In the bottom vertical class your second paragraph.
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?
I would like to position three items in CSS using float.
In the top left--logo
To the right of the logo, the navigation, which is an unordered list, ie floating left.
In the top right, a 2 line sign up for newsletter field--copy top row and form field with submit bottom in the second
I've given each it's own Div tag but can't see to get it to work with float. Only absolute positioning which doesn't look good when the site is resized. I put a table inside the div right now but would love a pure CSS solution.
I can get the logo to float left and the sign up field to float right but can't seem to get the navigation properly positioned. Either it goes all the way left or I put a clear in and it goes below the logo and field.
Any suggestions would be appreciated.
What about the following?
.floatleft_logo
{
float: left;
width: 200px;
}
.floatleft_nav
{
float: left;
width: 600px;
}
.floatright_email
{
float: right;
width: 300px;
margin-left:-250px;
}
Put all three in a 850px-wide container div and this works for me in a test page.
If I've understood it correctly, maybe you could set the first and second element to float: left, and then set the margin of the third element equal to the width of the first and second?
You could also set the first element to float left, the third to float right, and the second with a margin equal to the width of the first element. Like a three-column layout.