I have 3 divs all floated left. I want to set the second div and third div to specific sizes (based on pixels or percentages) and the first div to simply take up the rest of the space.
Additionally at runtime depending on the user's privileges one of the specific sized divs might not be displayed. I need the first div to take up the space left over.
How can I do this?
You can use display:table property for like :
.parent{
width:100%;
display:table;
}
.fill{
border: 3px solid green;
display:table-cell;
}
.fixed{
width: 100px;
border: 3px solid blue;
display:table-cell;
}
http://jsfiddle.net/WVDNe/8/
It's not work in IE7 & below.
But check this it's work in all browsers:
http://jsfiddle.net/LJGWY/3/
Related
The effect I'm going for:
I'm using a foreach loop to display the divs in this container element. The quick-and-dirty would be to do index % 4 (or whatever the number-of-divs-per-row is) and style accordingly, but I'm looking for a css-only approach if there is one.
One thing I'm playing with now is applying a white border to the container element that has negative margins, to cover up the borders of the outer divs... what other alternatives are there?
EDIT: I'm trying the "White border around container" method but it's not working because I'm floating the divs left (for responsive-ness) - so as soon as the white border of the container element overlaps the black border of the div, the div gets pushed to the next line.
I've got two answers for you to consider... The first one is pure css like you requested, and the second utilizes a small amount of php along with css. Typically, pure css solutions are desirable, but depending on the situation, the second solution could have some benefits as well.
So, first of all, the css. You were definitely on the right track with the outer border covering the borders of the divs. I adapted your approach a little bit though. Rather than putting that border on the parent element, I created an extra child (a span in this case) and positioned it absolutely within the parent, to span the full width and height. I put the border on this, instead of the parent, and since it is absolutely positioned, it doesn't interfere with the positioning of the other elements.
Also, box-sizing: border-box; could come in handy if you are having troubles with borders breaking the layout. I utilized that in my examples.
Here's the demonstration for that approach:
http://jsfiddle.net/PGygr/
As for the second solution, I used some more advanced selectors to override certain borders on certain boxes. That way, they aren't just hidden.. they're actually not there. For that reason, I would prefer to use this solution over the first, but that's just my opinion.
First, i put a border right and border bottom on all of the divs. This will be correct for all of the divs except for the last of each row, and all of the ones in the bottom row.
To select the last div in each row to cancel out it's right side border, I can do something like this:
.container div:nth-child(Xn) {
border-right: none;
}
Where the 'X' would be replaced with the number of divs in each row. If I do this with embedded styles, I can use php to dynamically put that number there.
To select and deactivate the bottom borders for the last row, I can do something like this:
.container div:nth-child(X) ~ div {
border-bottom: none;
}
Again, the 'X' would be placed in with php, and would be equal to the number of divs in each row, multiplied by the number of rows, minus one. So basically, select all of the divs that come after the last div in the second last row.
Here's the fiddle to demonstrate, minus the php aspect of it (I've manually entered the numbers into the css)
http://jsfiddle.net/t7atH/
Whether you decide to stick with the css only approach, or try adding in a little php, I hope this helps you. Best of luck!
UPDATE: as an afterthought, there is a third solution that I should probably add in. If you are able to add in row elements wrapping around the divs, you can utilize :first-child and :last-child to disable your borders.
It's fairly self-explanatory I think, so just take a look at the code:
http://jsfiddle.net/PGygr/3/
Here is a very simple solution using css grids - but it only works if there is no empty cell in your grid.
.container {
display: grid;
grid-gap: 2px; /* the length of inner borders */
background-color: black; /* the color of the inner borders */
}
.cell {
background-color: white;
}
The idea is to fill the container with a background color. Each cell will re-ink with its own background color, only leaving the gap visible.
http://jsfiddle.net/mq8Ldpbt/
I needed a solution to the same problem and used Blake's first solution - thanks!
However, I decided to do it slightly differently... rather than add an extra element to the markup I used a CSS pseudo element.
.container:before {
content: ' ';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
border: 2px solid #eee;
}
http://jsfiddle.net/Avc2v/
I look at all the solution and I found this one to be the best. Because it is responsive. So I edited a bit that it looks and works much better ...
How does it work?
What we are doing is adding a pseudo class with empty content with the width of 1px and hight of 1px to the top and to the left of the container div [labeled with ".border-override"].
Note: this solution is quite the same as the one on top of the page, the tiny difference is that the one on top of the page run into bugs when using it for divs with different width and different ordering on screens with different widths. [Thanks for the top page response though, but using PHP and CSS, is like trying to hardcode table! If you know the last row and last column, you are kind of drawing a table, so better use a table than the hassle of divs ...]
Fiddle
<style>
.border-override {
background: white;
position: relative;
}
.border-override::before {
position:absolute;
height:1px;
width:100%;
top:-1px;
left:0;
background-color: white;
border:1px solid white;
z-index:100;
content: ' ';
}
.border-override::after {
position:absolute;
width:1px;
height:100%;
top:0;
left:-1px;
background-color: white;
border:1px solid white;
z-index:100;
content: ' ';
}
.border-override div {
width: 100px;
height: 50px;
border-top: 1px solid blue;
border-left: 1px solid blue;
float:left;
position:relative;
z-index:1;
}
</style>
<div class="border-override">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
.container > div:nth-child(3n),
.container > div:nth-child(3n-1) {
border-left: 4px solid white;
}
.container > div:nth-child(n + 4) {
border-top: 4px solid white
}
Explanation :
This is for a 3 x 3 cells grid
I want a border on the right hand side of a div.
I do:
<div class="span6" style="border-right: 2px solid #727272;">
the things is I'd like my border not to run to the top and bottom of the div. Maybe 5px from the top and 5px from the bottom. Or 90% of the height of the div. How do I do this?
Thanks
You can use a pseudo element to hold the border. The following would make the "border" be 90% of the height of the parent element:
http://cssdeck.com/labs/kyrvt8hf
div {
position: relative;
}
div:after {
display: block;
content: '';
position: absolute;
top: 5%;
bottom: 5%;
right: 0;
border-right: 2px solid red;
}
I could be wrong, but I don't believe there is any way to really make this happen that you would probably want to roll with. In fact, I thought of three "hacky" ways that might work, but all three can't get you to the desired state, assuming a variable height.
Assuming a fixed height, you could create a 2px wide by 90% div height image of the color you want, then set it as the background image of the div. Something like:
.span6 { background: #fff url(bgBorder.png) no-repeat right center; }
Update
A variation based on what Tyblitz said in the comments. This allows for dynamic height. I am still inclined to go with the :after option, as it keeps your DOM cleaner, but in case that is not possible:
http://jsfiddle.net/designingsean/bsbgX/1/
HTML:
<div class="span6">The content div<div class="border"></div></div>
CSS:
.span6 {
width:50%;
height:400px;
background-color:#ddd;
position:relative;
padding:10px;
}
.border {
width:2px;
background-color:#222;
position:absolute;
top:5%;
bottom:5%;
right:0;
}
Note that to make it a fixed distance (say, in pixels), just change the top and bottom from a percentage to the px you want. See http://jsfiddle.net/designingsean/bsbgX/2/ for the example.
This picture show's how border's work
You can either set margin to curtail the border or set padding to extend the border. Currently there is no option in CSS to target the border and make it bigger or smaller(not talking about width obviously). You can however use padding, margin, another div or pseudo element's to reach the desired effect.
I have a div tag in which i have other controls. I have given a border to the div through css. I want the div tag to wrap itself around the controls and auto adjust its own size.
.divwrap
{
width: 60%;
height: 60%;
border: 1px solid #66CCFF;
vertical-align:middle;
margin-left:150px;
margin-right:300px;
}
Now in the above code I have fixed margins. So if I were to use the same style for a div tag on another page, it would be problem because the controls (inside the div) on another page may be more or less in no. I want the div tag to be like a rubber band that can auto adjust the size when wrapped around something (in this case, an html table with controls).
is this achievable? if yes, how??
if you want to make a wrapper keep these things in mind
try not to give it a static dimension.
don't give any width and height, as it is going to be a little larger than the content over which it is applied
give percentage value margin and padding:
try this:
.divwrap
{
padding:3%;
display:inline-block;
margin:3%;
border: 1px solid #66CCFF;
vertical-align:middle;
width:auto;
position:relative;
box-shadow: 10px 10px 5px #888888;
}
see this fiddle.
so now, no matter what the width and height of the child div is, this div will always wrap around it.
Here are two cases:
Expected behaviour: http://jsfiddle.net/Xm2eR/7/
Inconsistent behaviour: http://jsfiddle.net/Xm2eR/1/
How can I make the second example work like the first one and why is this difference?
Conclusion
I set up a fix width for the parent.
Using absolute position with body as the parent is really tricky ( when you get to the edges )
You need to simplify your code. All you need to do is set the float:left; for the inner elements and the positioning in the parent element. See this example: http://jsfiddle.net/Xm2eR/30/
#menu {
border: 1px solid red;
position:absolute;
left:100px;
}
.inner{
border:1px solid black;
float:left;
padding:10px;
}
The reason your code didn't work is because the left:800px was so big it the inner elements didn't have any room to float into. This can be fixed by setting a width or by ensuring that the left adjustment has enough room to float into.
#menu {
position: absolute;
left:900px;
border:1px solid black;
height:40px;
width:24px;
}
give the #menu div some fixed width, if it's possible
how about not floating the internal divs, but instead making them inline-blocks, would that work for your use case?
example jsfiddle here
if this works you will need a small workaround for IE7 and below, and will somehow need to give IE the rule #menu div {display: inline;} after the inline-block rule
I have the following css class:
.CtractLabel
{
font-weight:bold;
padding: 2px;
text-align:left;
/* width:120px; */
width:150px;
float:left;
border-bottom:solid 1px #aaaaaa;
border-right:solid 1px #aaaaaa;
background: white url('../Images/GridHeaderBg.gif') repeat-x bottom;
}
On my page, I have a a div with text that is less than 150px. However, the div does not expand to 150px, but contracts around the text.
Is there a way to force the div to be precisely 150px regardless of the length of the text in the div?
The default value for the width of a div element is auto, which causes it to take up all available space horisontally.
If you don't get this behaviour, there are some possible causes:
You have made it a floating element.
You have specified a width for it somehow, perhaps indirectly.
You have some other element taking up space.
To see exactly what CSS applies to an element, and exactly where elements are, you can use the FireBug plugin in Firefox.