I have three divs: header, left and right, and I am using border-right to add a line separating the two divs. The problem that I am having is that the border only spans the length of the content and not the entire page. How can I make the border extend to fill the entire page?
.leftdiv{
width:36.5%;
border-right:1px solid #222222;
float:left;
}
The problem is that the div will only grow to be as large as the content inside of it needs it to be. The border is just a visual cue to that.
You could throw a min-height on the div to make it extend as far as you want it.
The other solution would be to create faux columns, but your best bet may be in this article:
http://css-tricks.com/fluid-width-equal-height-columns/
Related
I'm using react-photo-album to have a photo album on my website.
I was wondering if it was possible to have a CSS border wrap around the photos at the bottom, but following the sides to account for different heights?
What it is currently:
I was picturing something like this:
What I was able to get it to using :last-child on the react-photo-album--column class:
But any attempt that I did just resulted in a border around the entire container, and not the individual photos at the bottom.
I already style the other sides with:
.react-photo-album {
border-radius: 5px;
border: 4px solid #86afe1;
border-bottom: 0;
padding: 3rem 2rem 2rem;
}
and the container's HTML is available to view here my thought was to target the last child of each react-photo-album--column I just don't know how to do the sides then.
You could put borders around the side and bottom of the photo container divs. Then give these divs a background color that is the same of the overall background (blue), and overlapping these with the borders you want to hide. So basically:
Your container divs have 2rem padding
Each container has a higher z-index than the one to its left (to ensure overlap)
Each container has a blue background
Each container except for the first one has a margin-left of -2rem to move over the border of the container to its left
Edit:
Thinking this through a little more, this will only work when a container is shorter than the previous one. You could solve this by writing a function in javascript that checks whether a container is longer or shorter than the one before and after. Based on this, you could use or not use a border at each side (by means of extra classes applied to the containers).
I am designing a website with two floating columns which I want to fill the whole screen.
#column_main{
position:relative;
background:#ffffff;
float:left;
width:70%;
height:auto;
min-height:550px;
}
#column_side{
position:relative;
background:#dbdada;
float:left;
width:30%;
height:auto;
min-height:550px;
}
if I had the line below to #column_main
border-left:solid 1px #c0c1c4;
The float messes up and they are no longer side by side.
In IE I have been able to fix the problem by setting the #column_main width to auto and it fills the rest of the page. This doesn't work in firefox and I have tried reducing the percentage slightly but that leaves a gap between the #column_main and the right edge of the page. Is there a way to have the 1px border on the left and make the float fill the remainder of the screen.
The float no longer works because of the box model where the border is added to the width instead of included in the width, you have already used up 100% of the width by doing width:70% and width: 30%.
If you plan on applying a border you might want to apply it to a child element inside one of the wrapping floated columns and use those parent columns only as a grid system to structure your other content.
Alternatively try bootstrap grids
add box-sizing: border-box; to #column_main
This property basically says you want the box size to apply to the border and everything inside it.
This blog post explains this, and some other options to fix this particular problem.
I have horizontally stacked divs using the following code below:
.basic {
width:100px;
position:relative;
display:inline-block;
border: 1px solid red;
text-align:center;
margin:0;
padding:0;
}
#container {
white-space: nowrap;
border: 1px solid black;
width:300px;
overflow:auto;
}
The 'container' has white-space:nowrap for stacking it's children horizontally. However, the horizontal children have spaces to their right. Here's a fiddle showing the demo. Inspecting box layout there doesn't seem to be any margin/padding. But just some mysterious 'dark matter' pushing it out :P
The queer thing is that the same code is used at different places in my application but this anomaly shows up in one place as shown in the image below:
Don't worry about the garbled text on the top. I haven't rotated the div 90 degrees CCW as yet :)
However, pay attention to the bottom part of the image. The textbox divs are stuck to each other whereas the ones on the top aren't. They use the same CSS as above, but differ in structure. The top Div has two floats which are cleared by the div with the arrow towards the bottom. So no 'uncleared' floats there. Rather than posting the entire HTML/CSS I recreated the problem in the fiddle.
What I fail to understand is that even after having 0 margin/padding and display:inline-block for the child divs why is there still some space? I'm sure this has been asked quite a few times here but why would this happen once and not in another place? Besides, how best to 'fix it'??
display: inline-block places a margin to the right if there exists a whitespace between the current and the next element. This space is calculated as a product of 4px and the current font-size in ems. Notice the difference between the first and second rows in this fiddle: http://jsfiddle.net/MkasM/
In your case, this can be controlled simply by setting margin-right: -4px since you haven't changed the font-size.
More here: http://css-tricks.com/fighting-the-space-between-inline-block-elements/
Also, it is good practice to give your elements 'box-sizing: border-box' if you haven't already. It will contain the 'padding' and border-widths within the blocks so it wont interfere with the layout.
To read: http://paulirish.com/2012/box-sizing-border-box-ftw/
I've got several <div>s inside another <div>, and they fit just right, but I would like to add a border to distinguish between them. However, when I add a border or an outline, it shows surrounding the outside of the div. Is there a way to get it so that the border will be inside the edge of the div?
Example: http://jsfiddle.net/5cSke/11/
I would like the inner <div>s to all stay within the outer div, and for the borders not to expand and cover anything outside the inner <div>s.
EDIT (Partial Solution): I was able to find a partial solution by setting the overflow of the containing div to hidden, which prevented the borders from spreading beyond the outer <div>, but not from spreading between the <div>s within it.
That's how the box model works. There is a CSS3 box-sizing: border-box style that will let you do what you want.
Updated Fiddle: http://jsfiddle.net/5cSke/14/
you can make several divs within each other just give specify style for each one using
div id or class
<style>
div {
border : 2px solid red;
}
div #test2 {
border : 1px solid black;
}
</style>
<div id="test1">
main div
<div id="test2">inner div</div>
<br>
</div>
for more information
Nested DIV elements
I don't think there's a way to prevent the border from appearing on the outside of your divs. I would instead recommend setting background colours on your divs in order to distinguish between them.
There might be a new css 3 property to do stuff like that. But there is a more elegant solution. Give each div an rgba value with some opacity. Overlapping (or) nested divs will have a darker background then its parent.
Working Example
The following example is identical in almost all browsers including IE6:
http://jsbin.com/adica3
#one {border : 1px solid red;padding:20px}
#two {border : 1px solid yellow}
p {border: 1px solid blue;}
.marg {margin: 0;padding: 0}
.padd {margin: 20px}
</style>
</head>
<body>
<div id="one">
<p class="marg">Padding to div</p>
</div>
<div id="two">
<p class="padd">margin tp P</p>
</div>
But when I give width to div then second div becomes shorter then first div.
How we should decide which is appropriate?
What browser compatibility issues should I know about?
Margins are on the exterior, paddings on the interior relative to the border. So obviously if you have something like a background image and text, and you want the text to have space between the edge of the bg image you'd use padding. Same thing with borders.
If you wanted space on the outside in addition to space between the border/bg images then you'd use margins.
If you're not doing anything remotely design-complex then it shouldn't really matter, but one thing you should look out for is margin collapsing, if you have elements coming before/after with vertical margins and you specify margins the values will collapse, sometimes you'd use padding to navigate around that.
If you give #one and #two a width of 200px, #one will take up 240 pixels without counting the horizontal borders, since it has 20px of padding horizontally.
IE5's rendering engine and quirks mode IE6/IE7 incorrectly draw the correct amount of space if you specify horizontal padding and a width, width:100px; padding:20px; would force the box to actually take up 100 pixels of width, instead of actually being 140 pixels as it should correctly be.
Another bug to note is the double margin bug; if you have a floated element and a margin that's in the same exact direction as the float, eg float:left;margin-left:100px; it accidentally doubles up. This is fixed by adding display:inline; which forces it to just have 100px instead of 200px to the left.
I notice that you ask a lot of questions which would be answered by simply reading a decent front end book - have you considered reading:
http://www.amazon.com/CSS-Mastery-Advanced-Standards-Solutions/dp/1430223979/ref=sr_1_3?ie=UTF8&s=books&qid=1263529151&sr=8-3
http://www.amazon.com/Build-Your-Website-Right-Using/dp/0980455278/ref=sr_1_13?ie=UTF8&s=books&qid=1263529151&sr=8-13
http://www.amazon.com/Beginning-CSS-Web-Development-Professional/dp/1590596897/ref=sr_1_12?ie=UTF8&s=books&qid=1263529151&sr=8-12
Those would probably answer a lot of your questions...
I'd make the decision based on what's going to be inside your tags.
For example, is the <p> the only thing that's going to appear inside your div? If so, then it probably doesn't matter.
If there are other elements that will be inside the div, do you want padding around them or not?
As for the modified width, that will probably be due to the different boxing models between browsers.
i think the easy way is thinking the border of the element.
margin spaces outside border, while padding inside.
Of course, there are some browser related issue made them difference in some way, but i suggest stay with my suggestion and find work around on those special browsers.