I'm trying to use css borders to visually group my sections, but the border that is drawn for my second section encompasses the first, so it looks horrible. How can I make the borders right.
My code:
My first div is float left, and its border shows up correctly, encompassing only the area it needs. It has mostly input elements down the left side of the page.
<div style="float: left; margin-right: 40px; border-width: medium;
border-color: Black; border-style: solid">
My second div also is mostly textboxes and labels, and it has this div declaration:
<div style="border-width: medium; border-color: Black;
border-style:solid">
Unfortunately, I must be missing something about the css box model as this border goes all the way to the left and encompasses the other div. I'm trying to just have two boxes that encompass each div so that there is some visual seperation and grouping. If I have to use something other than borders that's ok too.
First set a width to your divs, so that they no longer go over the whole page. (try width: 50% for a start)
Then use margin (or margin-left/top/bottom/right) to assign margins to your divs as needed. That way the borders no longer collapse.
Add the float:left to the second DIV as well - they will still appear side-by-side if there is sufficient width, but the space for the first won't be left "inside" the second, which is what you see at the moment.
You can achive this by using "fieldset" tag easily. This way you can have the heading for different groups by using "legend" tag.
Related
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'm working with an HTML site which has a design that is fixed on a certain width, centered with auto as left and right margins. I'm working on an interactive script that sometimes creates a large table as output that will not fit into this width, it might be wider.
To illustrate:
<html>
<body>
<div style="margin: 10px auto; width: 300px; border: 1px blue solid;">
<div style="margin: 10px auto; width: 400px; border: 1px red solid;">
</div>
</div>
</body>
</html>
(http://jsfiddle.net/ALPXn/)
My question is, how can I align the inner, red div in the center, no matter if it sticks out to both sides of the blue div, without giving it an explicit negative left margin, because I don't know the final width?
I think you can do this using jquery. You can change the css dynamically, after page has been loaded you can change css.
Code will look similar to this.
var x = $('outerDiv').width();
var y = $('innerDiv').width();
$('innerDiv').css('left',-(y-x)/2);
For that, you have to give divison id's as outerDiv and innerDiv.
The problem here is that you'd have to make the child element ignore the parent's width and position for this to work. It is possible with some javascript manipulation though. By changing the css position to absolute, and centering it relative to the screen, it will effectively ignore the parent, while still technically being contained by it.
Updated link using offsetWidth: http://jsfiddle.net/g6dGE/1/
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;
I'm creating an HTML page using the 960.gs grid system. I'd like to run a vertical dotted line down the centre of one of the gutters.
Page with grid-overlay (gutters marked in red):
Page with mocked-up vertical dotted line:
However, the gutters are enforced as margins in the grid.css style-sheet. When I add a border to the content columns, it immediately throws the grid off and breaks the page (the final column DIV wraps to the next line).
My workaround was to give the entire page a vertically repeating background of 940px x 2px, containing the dots, so that it would give the illusion of a dotted border.
I'd prefer this was handled in the code though.
My question: Is there a similar type of behaviour to text-indent?
Used with a minus value, this pulls back the start of the text without impacting the DIV's size, margin, padding, or adjacent DIVs.
Perhaps I can do something similar with the border of the columns.
As in the question, my workaround - and eventual solution - was to give the entire page a vertically repeating background of 940px x 2px, containing the dots, so that it would give the illusion of a dotted border.
As far as I understand, this is the most desirable and effective solution that I've found.
You have to add an extra div. Same when you want to add padding.
<div class="container_12">
<div class="grid_6">
<div id="content">
<!-- Your content -->
</div>
</div>
</div>
#content {
border-right: 1px dotted black;
padding: 0 1em;
}
So I have two divs. One left div with navigation links and one right div that populates with content depending on what link you click on the left. I would like to have a vertical gray line between the navigation and the content separating the two, but I need it to change in height depending on how long the right side content div is. (And also if the right side isn't as long as the navigation, have the line go to the bottom of the nav by default).
So if the user clicks on a link that makes the right content div really long, I need the vertical line to change its height dynamically and go all the way down, but if the content isn't as long as the nav i still need it to go all the way down to the end of the nav.
I was trying things with borders and height:100% but I couldn't get anything to work cross-browser. (IE and FF) Thanks!
Assuming your left nav div has a fixed height, or a height that doesn't change often. Let's suppose your left nav div has a height of 400px. Then:
div.leftnav {
height: 400px;
float: left;
}
div.rightContent {
min-height: 400px;
border-left: 1px solid gray;
float:left;
}
Keep in mind, "min-height" is not supported by IE6.
A repeating background image for the parent div with a vertical grey line positioned appropriately would be your best bet.
You could let the navigation div have a border on the right, and the content div have a border on the left. Letting those two borders overlap should give the desired effect.
i once solved this by using a background image repated on the y axis. Just create it as wide as your page and not very tall, maybe 10-20 pixels. and then just repeat it downwards. Kind of cheating maybe, but it works in some cases :p
One example of how I did it you can see on this website.
The way I do this is to put the elements into a container div with overflow hidden. You then apply a left border to all repeating div's. Then, on all floating child elements you set the css properties: padding-bottom:2000px; margin-bottom-2000px;
Example:
CSS
div.vert-line{overflow:hidden}
div.vert-line>div+div{border-left:#color;}
div.vert-line>div{width:200px; float:left; padding-bottom:2000px; margin-bottom:-2000px;}
HTML
<div class="vert-line>
<div>Left Side</div>
<div>Right Side</div>
</div>
Hope this helps!
The answer to this question might help you:
Extending sidebar down page
you can use the css border-left on the right div.
.vertical_line { border-left: 1px solid #f2f2f2; }
<div>
<p>first div</p>
</div>
<div class="vertical_line">
<p>second div</p>
</div>