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
Related
I have a problem that I have spent many hours on and could not find a solution in any way. I will link the code in CodePen. It is just a subset of my layout. This is the reason for some of the root element's styling.
I basically have a layout where the page/screen/window should not have a scroll, but the inner body of the table widget should, when there are enough elements that go beyond the expected area of the table.
Basically I have a top content on the page, and a table widget. The table widget is to take up the rest of the space of the screen. The table has a title and a header. The body is to take up the rest of the table space and to have a scroll when it has elements that go beyond that space.
I have searched many resources over stack-overflow and tried many things. I will provide the current state of the layout in the pen. Here you can see all that I think is my best try.
https://codepen.io/anon/pen/KLogbJ
The central area of interest is the .body element. Based on things I've read I have styled it:
.body {
display: flex;
flex-direction: column;
flex: 1;
overflow: auto;
padding: 0.5rem;
min-height: 0;
}
I would appreciate any help on this.
You could add overflow: scroll; to .body and give the .item a min-height
Also give your .table a max-height: 100%;
See this fiddle
The problem is that the contents of the area you want to scroll is set to scale to fit it's container. For the internal scroll you are looking for you would need to have:
A set height for the container so it won't expand to fit the content (in this case you want it to be 100% of the screen)
The content must not scale in height to fit it's container. It has to maintain it's height so that it remain larger than it's container.
If you have those 2 conditions you should find the scroll bars appear.
This is giving me such a headache i just have to ask. I never seem to have trouble with C# or Java or SQL or JS as I have with CSS, and i spend too much time trying to figure things out.
I have a table div and some row and cell divs inside it. And i just want to make table div to be of exact height.
My current style:
div .table
{
width: 410px;
height: 410px;
max-height: 410px;
display: table;
border-spacing: 10px;
border-style:dotted;
border-width:medium;
overflow: visible;
}
What else do I have to do to make div exactly 410 px high?
I tried wrapping it in a outer div (with blue borders in picture with specific height and display:block) but table div does not seem to notice it. I added a div with clear:both at the bottom, sometimes it helps but not today...
It appears that:
display:table;
will force the element to expand to fill the width of the content. Even if you set "overflow" to be hidden.
Here's a fiddle with some examples:
http://jsfiddle.net/dRLfv/
I think you'll need to do a regular "display:block" and then set overflow appropriately. That would probably require you to adjust some of your other styles for the table/form elements inside but that should be double and I'm sure others will be happy to help.
I hope that helps!
Cheers!
Probably not the best title I've ever written, but I find it hard to formulate this question well. I'm working on a div that should cover 100% of the parent (could be body). This div should have a variable number of children, so every time the page is refreshed the children count can vary from one to ten, maybe more.
I want these children to all be equally wide and have a percentage width. So if there are five children, each child should have width: 20%. If there are two children, they should have width: 50%. I could do this with JavaScript, but I'd really prefer keeping all layout stuff in the css.
Is there a way to accomplish this without using tables?
Use display: table, display: table-cell, and table-layout: fixed.
See: http://jsfiddle.net/thirtydot/ZKXrM/
table-layout: fixed is to equally distribute the available width between any cells without an assigned width.
This works in all modern browsers. It doesn't work in IE7. If you need this to work in IE7, either use JavaScript to polyfill, or use a real <table>.
CSS:
.container {
display: table;
table-layout: fixed;
width: 100%;
}
.container > div {
display: table-cell;
border: 1px dashed red;
}
HTML:
<div class="container">
<div>1</div>
<div>2</div>
..
</div>
You could define something like
div#contains2 div
{
width: 50%;
}
div#contains3 div
{
width: 33%;
}
and so on, then apply the appropriate class to the parent div.
That said, is there a good reason why you're avoiding a table, but trying to recreate how a table works? Sure, it may not be the absolute nicest "sleep-well-at-night" way to make a page, but if the table does the job how you want it doing, and you can't think of anything else that does, go with the table.
The bottom line is that you have essentially 3 options for automatic same-width columns:
Tables, which do it out of the box and will work cross-browser with no major issues
jQuery, which will probably work cross browser, provided the user has JS enabled
CSS like I suggested above, which adds bloat to your CSS file, and fluff to your markup
You can divide the total width (100%) into the number of items (X). So W = 100/X and W=Width.
Just a quick question regarding CSS positioning. I have several "segments" on my site which are 100% wide (fills the screen), and I want them floated next to each other. So only the first one will be visible, the other ones will be off-screen. I've tried playing around with positions and the overflow property without luck. Right now they just pop down below each other instead of floating.
This would work perfectly if the elements did not exceed the screen width, but as they do, they just pop down as I said earlier. I've tried setting a huge width to the "wrapper", something like 99999px. And then setting the segments to 100%, but that will just fill the whole 99999px width instead of the screen.
Any ideas?
JSFiddle example: http://jsfiddle.net/9xGPb/
Do you mean like this?
Example Fiddle: here
I used my favourite alternative to floats, inline-blocks
if you actually take it out of the fiddle it has some pretty (gaudy?) colours which show that it allows for the min-width: 900px; on the centered_content div to work too, and I removed the absolute positioning for the menu so the content would go below it, for demo only but you may find it useful..
let me know if any good or if you have any questions
Updated with some jQuery and to make corrections for default word-spacing
New Example: here
re: the IE6/7 hack rightly mentioned in the comments;
.segment {
display: inline-block;
overflow: hidden;
width: 0;
}
.segment {display: inline !ie7;}
needn't be a "parse hack" if that's your preference as long as that second rule is given to [lte IE 7] somehow, and separately at that it cannot be combined into the original rule with the * hack or anything, it won't work.. has to be in a separate ruleset.
I discovered word-spacing might be a problem if relying on width to hide, the natural behaviour of inline blocks is to put 3-4px between the elements like the space in between words, the workaround to this is to correct the word-spacing on the wrapper
.segment-wrapper {
white-space: nowrap;
word-spacing: -4px;
}
then restore it normal for the actual content divs, same place as you would restore the normal wrapping behaviour
.centered_content {
width: 900px;
margin: 0px auto;
background: #fcf;
white-space: normal;
word-spacing: 0;
}
and last, apart from this was fun.. there's 2 effects in that new fiddle - uncomment and comment the other.. forgive me I was playing! :)
The meaning of float is to try to float to the right or left unless there is not room for it.
This means that you cannot ever float an element off the page.
If you need to keep the element off the page, you will need to use a different positioning mechanism like position: absolute.
It sounds like you're creating a horizontal one-page portfolio. I've recently been working on something similar.
Using your fiddle I've set the .segment class to
.segment {width:90%;height:90%;position:absolute;}
and then offset each left positioning further off the screen
#home {background-color:red;left:5%;}
#work {background-color:yellow;left:105%;}
#portfolio {background-color:green;left:205%;}
#contact {background-color:blue;left:305%;}
http://jsfiddle.net/9xGPb/2/
I also added some jQuery logic to switch views for the divs.
I'm still not entirely sure which segments you want to start off the page but this jsfiddle uses positioning to shove the #two div off to the right: http://jsfiddle.net/EdAZP/1/
Which part of your example did you want to start off the page?
Did you try to just hide the other elements and toggle them with some javascript (jQuery is much easier)?
http://api.jquery.com/toggle/
What's the simplest correct way of aligning images without gaps horizontally within a div?
If possible I would not like to wrap every image in a div and I would not like to use a list. I'm rather looking for the proper CSS to achieve this with minimal markup.
The biggest problem are the gaps between the images which I can remove by setting the font-size to 0 wich is ugly and works only for Firefox.
<div class="images"><img1><img2><img3></div>
.images {
display: inline;
...???
}
A good way to do it would be to float the images.
However, be sure to add an overflow attirbute to their parent container to ensure it goes all the way around them,
Adding a margin would also neaten them up.
.images {
overflow: hidden;
}
.images img {
float: left;
margin: 0px;
}