I have Div named Container whose width is 100%; so its actual width in pixels can be changing from one user to another. Inside that Container, I have 10 boxes, each with the following values:
width:8%;
margin-left:1%;
margin-right:1%;
border:1px solid #000000;
float:left;
With those values, it should render like this, right?
Actually it's not. The boxes have 8% width in space and 2% width out space (margin)and because of the border line (1px), every box have 10% width + 2px
When you play with the resolution, you will see that from time to time the boxes are extending a second line and it appears like this:
How can i fix this layout?
I thought about placing another box inside those boxes which would set the border for the outer box, but it's not quite working for me.
I have created a jsfiddle for this. Adding a new div for each inner boxes and setting following properties will solve the problem. (The key was to move the border from the out boxes to the inner box.)
width: 100%;
height:100%;
border: 1px solid #000000;
Related
I think this may be a old question but I am difficult to find a answer.
I have one parent div and two child divs in it using display:inline block ( for tabular structure.
I want to have a vertical line between two child divs so i added another child div as divider div.
The way it should work is - if any child div has more content then there should be vertical scroll bar in parent div.
Now the issue i am having is - when i am getting a scroll bar in parent the divider div is not touching the bottom border of parent div. there is a gap. I need it to be touched to bottom all the time.
HTML
.container {
border:1px solid red;
display:block;
width:200px;
height:100px;
overflow-y:auto;
position:relative;
max-height:400px;
}
.column {
width:49%;
display:inline-block;
vertical-align:top;
position:relative;
margin: 0;
padding: 0;
}
.divider{
position:absolute;
left:50%;
border-left:1px solid red;
height:100%;
display:inline-block;
max-height:auto;
}
<div class="container">
<div class="column">
Test Test Test Test
Test Test Test Test
Test Test Test Test
Test Test Test Test
</div>
<div class="divider">
</div>
<div class="column">
Test
</div>
</div>
Any help would be much appreciated...
Well, everything it's working fine. basically you give the divider a 100% height, and that means 100% height of his parent which is set to 400px. That div can't understand that's there's content overflowing in the column unless you yo use javascript (or jquery) to know previously the real height of the column and set that height to your "divider".
What I can see as the best and fastest fix... why don't you use border-right insteed of using a div? FIDDLE
.column {
border-right:1px solid red;
}
Edited: Well, as you have commented that your right column may have a higher height that the left one... you could also give your right column a border-left however that could be messy if you dont use border-boxon your divs (which I do recomend you to get use for every single project. if you not familiar with it here you have it very well explained: https://css-tricks.com/box-sizing/).
Then after adding border-box to your containers, you can easily add the border-left to the right one, move it 1px (or whatever width you want to set up) to the left with margin and both borders will overlap.
Oh, and I have changed the inline-block to float insteed as inline-block elements always leave a little space between them and obviously you don't want that space in this example.
updated FIDDLE
New edit: now you have the left column at 50% and the right is 50% -1px. Probably it will never matter as no user will probably notice, but if you are a perfectionist insteed of giving your right column a 50% width you may use css3 option and use:
width: calc(50% + 1px);
perfectionist fiddle
If you have a number of block items in a list, I was wondering if there was a way to get
0 margin on the left,
0 margin on the right, and
margins between the items in the middle
Right now on the items in the list I only know how to do this margin:0px 5px 5px 0px;
This way there is no margin on the left, so it matches to the left of my container, but there is always 5px space on the far right column... however I need margin-right 5px to get space in between my items.
Any suggestions?
div.container{
width:calc(100% - 100px);
margin: 0 auto;
height:100%;
display:block;
background:black;
}
div div{
height:200px;
width:160px;
display:inline-block;
background:grey;
margin:0px 5px 5px 0px;
}
Ref: http://jsfiddle.net/Ly2M3/1/
Again I would like my items to be able to but up against the far left and right side of the container but also have margins to separate the items.
Yes, add text-align: justify to the div.container element.
I'm making another answer because it works well at centering the divs and it also matches the divs on the last line!
It requires a little knowing of the content you are using but some media queries can help you remove some extra space if you need to support multiple resolutions.
You need two things:
* The text justification (as Josh Rutherford answered) to align all lines except the last, and second
* A few invisible divs to fill the rest of the line so the browser can match the divs on the last line with the rest of the lines
The result is this: http://jsfiddle.net/wBe4F/1/, resize it so you can see the last line always matches the other lines no matter if there are 1, 2, 3, 4 or 5 divs, they always match.
So, the idea is to add extra divs with height 0px to fill one more line so the browser will also justify it and all visible divs will be aligned.
You only need to think how many ".extra" divs you put at the end. I would put enough .extra divs to cover a complete line with the widest screen size you want to support, then you could add media queries to hide unneded .extra divs if they are making too much extra space at the bottom of your container div (the background color is there to show that). Resize it small enough and you'll see all that space below the original divs created by all those unneeded .extra divs. You could give them an id for each .extra div and "display: none;" some of them if the resolution is less than some values to keep that controlled.
To make the extra divs the same width as the original divs just add them to the original divs declaration:
.data, .extra {
display: inline-block;
width: 120px;
height: 40px;
background: #666;
}
and then tweak them a little to make them invisible
.extra {
height: 0px;
}
There are a lot of "fill available space" questions on this site, but my issue is a bit particular in that I've already gotten a solution, but it doesn't work for buttons. I'd like to understand why this doesn't work for buttons, and how I can make it work. I imagine it's just some browser-style for the button element that I need to override.
I have two floating elements within a (fixed-width, if that matters) wrapping div. The right element has fixed width, and the left element should take up whatever width remains.
I can accomplish that by setting the right element to have fixed width and float: right, and leaving the left element without any special styling. This works perfectly for divs. It also works for spans, but only if I set display: block on them. For buttons, I can't get it to work at all. I tried block, inline-block, and every obscure width value I could find on the MDN.
http://jsfiddle.net/wjFbD/2/
I don't know why I didn't think of just wrapping the buttons in divs earlier. Here's what I've come up with:
http://jsfiddle.net/SkczB/2/
This involves the overflow: hidden box formatting context trick (which I suspected was going to make an appearance here, but couldn't quite see where to fit it in). Highlights:
The two buttons are wrapped in divs with class buttonWrapper.
Those divs are formatted according to the trick I outlined in the third paragraph, above. The right div has float: right and a fixed width, the left div has no special styling.
We now apply the box formatting context trick. The left div is given overflow: hidden, which causes it to make space for the right-floated div.
We can now apply a left margin to the right div, and change its width, and the left div will always be the right size.
The divs create the desired "fill available width" effect for us, now we just have to put the buttons inside the divs and give them a height and width of 100%.
If it's the left button you wanted to have a fixed width, then basically repeat the above steps with left and right swapped.
This may not be exactly what you're looking for here, but here's an option that seems to have worked out for me with your fiddle.
If you've got a fixed width div that the elements are contained in, you could split get the remaining width of the div after button A has been set to fill up, say, 100 pixels and then set button 2 to be the remaining size.
Alternatively, another option would be to run it as percentages 20%/80%, 30%/70%, that kind of thing. Here's a fiddle that achieves what you're looking for on just the button wrapper at the bottom. I've applied specific classes for it and added divs around each button for a bit more control. The button wrapper divs are set to 20% and 80% respectively, while the button is set to fill 100% of the containing space.
Here's the modified fiddle and the modfied HTML/CSS. Hope it helps for what you're looking for...
http://jsfiddle.net/wjFbD/7/
HTML
<div class="btnWrapper">
<div class="buttonWrapperB">
<button class="left">
button Left
</button>
</div>
<div class="buttonWrapperA">
<button class="right">
button Right
</button>
</div>
</div>
CSS
.btnWrapper
{
width: 100%;
background-color: #FEE;
border: 2px solid black;
margin-bottom: 10px;
height: 50px;
}
.buttonWrapperB{
float: left;
width: 20%;
}
.buttonWrapperB button{
width: 100%;
height: 50px;
}
.buttonWrapperA{
float:left;
width: 80%;
}
.buttonWrapperA button{
width: 100%;
height: 50px;
}
I adjusted the background opacity of your .right elements to see what was going on below them. It looks like the .left elements are not only taking up the remaining space-- they're also taking up the entire row. Weirdly, the text inside these elements is centered as if it were only taking up the remaining space.
If you want the same to work for the buttons, it seems like the only solution involves a little hack. Buttons are quite complex indeed.
button.left {
margin: 0;
position: absolute; /*this seems to be the only way to get the button to stay on the same row - floating it left won't even work*/
z-index: -1; /*hides the "overflowing" part below the right button*/
width: 100%; /*make the button stretch to the full width of the row*/
padding-right: 400px; /*add a padding-right hack so that text will be centered correctly - should be same size as fixed width .right element*/
padding-left: 0;
display: block;
}
See updated fiddle: http://jsfiddle.net/wjFbD/6/
starting with
One element has fixed width, and the other element should take up
whatever width remains.
here is my general solution:
<div class="container">
<div class="two">125 €</div>
<div class="one">my favorite provider</div>
</div>
(stylus syntax, in your mind just add {,},;)
.one // red
border none
height auto
overflow hidden
white-space nowrap
text-overflow ellipsis
.two // green
float left
white-space nowrap
text-overflow ellipsis
You can set the one green thing to a fixed width, but indeed, you do not even have to! Things full up nicely. And String get's truncated with an ellipsis, if it gets too long.
Things get a bit more complicated, when one of them is a <button> rather than a <div> (and I can't figure out, which style property differenciates them, so I would need to style away), but anyway, with a wrapper, that also works:
→ See full codepen here. (Feedback appreciated.)
I have a fluid width layout. Left and right column have a fixed width and my center column changes its width in between max and min width specified as the browser width changes or screen resolution changes. It looks like image below:
As you can see, there are some small containers in middle column, they hold up several products etc.
The problem that I am experiencing is that when the width changes and middle column cannot accommodate 3 containers, 1 will fall below, as they are floated and then it looks like something below:
Now this space that comes in the right of containers looks ugly. What I want to do is to keep them centered if one falls below when width decreases then two should appear in the center of the middle column and when another one falls then 1 container left should also appear in the middle like below:
Can I do this with css only? or I need to introduce some scripting language for doing it dynamically?
This is the css for container, that I am using
.prod-container{
float: left;
width: 180px;
height: 290px;
margin: 2px 6px;
border: 1px solid black;
}
Example on http://www.myappontest.heliohost.org/index1.html
Replacing float: left; with display: inline-block; in .prod-container's style and adding text-align: center; to #center-content-container's style will achieve the desired behavior.
Working version of your page: little link. Here's the modified CSS file, too: another little link.
Hope that helped you in any manner!
I would put the center floating blocks inside a div with a max-width 100% (in the scope of the center column). Center that block with "margin-left: auto margin-right: auto". This will keep the floating blocks moving to the next line if there's not enough room, and the centering div will size with it's contents, allowing it to center within the center column.
I've started to write a design for my video streaming site.
http://www.xjerk.com/new.site/ [SFW]
The content area is horizontally fluid, and the white boxes in the content area are divs that are floated left. This means they all sit next to each other nicely, and flow onto a new line when there's no room left.
However, the content area often has a blank area on the right side, where there's not enough room for another white box. I would like to get rid of this; either by making the whole container div (#container_inner) shrink to remove this space, or failing that, make the blue bar above the white boxes contract (by making #content contract) so the the right edge is in line with the white boxes.
I've tried setting the left area (#content) to inline-block, but this doesn't work since the content inside is bigger than the div width (hence the overflow onto multiple lines).
Is there any way this can be achieved, or would a fixed width design be my best bet?
PS: I hope I've explained everything well enough.
Use media queries to set break points for the blue bars size.
Have you tried setting the video_box to a % of the width?
This should remove the white-space.. Remember to change the margin to percentage too, else width could start to exceed 100%+.
For exmaple:
.video_box {
margin:1%;
width:31%
min-width:100px;
height:370px;
border-radius: 10px;
-moz-border-radius: 10px;
border: 1px solid #d0d0d0;
background-color: #ffffff;
float: left;