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
Related
I have two divs, the parent that has rounded corners, overflow:hidden and an inline background image, and a child div that is position:absolute with a background color and opacity.
At my normal screen size, the child DIV pretty much fills the parent DIV, but I can just make out a slight line of the parent DIV on the corners.
The bigger issue is that when I zoom in to the page, at some screen sizes the child DIV is considerably smaller than the parent DIV, which obviously looks awful.
Here is my code:
.parent-div {
height:350px;
border-radius:4px;
overflow:hidden;
background-size:cover;
background-position:center center;
background-repeat:no-repeat;
position:relative;
}
.child-div {
position:absolute;
bottom:0;
left:0;
width:100%;
padding:15px;
text-align:left;
background-color:rgba(255,255,255,0.9);
}
I've googled this but can't find a solution that works. I have tried adding the border radius on the child DIV, but this doesn't work.
FYI - when not using border radius everything seems fine.
EDIT: I think I have kind of found the issue. I have another div around all of these with padding. When I get rid of this it works. When I change the padding size I can see that is causes the issue in the image above at various padding sizes.
EDIT2: Actually, I found that what was causing the issue was the overflow:hidden on the parent div. When removing this and just ensuring I had the border radius on the child div, everything worked as expected.
It's better if you provide a working fiddle, but I think that your problem is the meassure of .child-div. Try this:
.child-div {
box-sizing: border-box; /* here */
border-radius: 4px; /* to apply the same that the parent */
height: 100%; /* to make all height */
position:absolute;
bottom:0;
left:0;
width:100%;
padding:15px;
text-align:left;
background-color:rgba(255,255,255,0.9);
}
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 2 divs. I want 1 div to be on the left side of my window and the other on the right side. I did this correctly with my logo and a little text next to it. However, under that I would like to have yet another 2 divs. I put those 2 divs in 1 div with style clear:both; this div lines up nicely under the two others. But once I do float: right; with the 2nd div, it goes outside the main div... Why?
The code:
(This should be lined up to the left)
#menu {
background-color:#485D9C;
margin-left:10px;
text-align:center;
width: 200px;
position:absolute;
float:left;
}
(This should be lined up to the right)
#content {
text-align:right;
width:600px;
position:absolute;
float:right;
}
(This is the div where both "content" and "menu" are in)
#middle {
clear:both;
border: thick solid;
position:relative;
}
Do you have an example ? With this little test: http://jsfiddle.net/BouFe/uHJQB/1/ it works !
Whenever I am using floats, I put a div, with "clear: both;" applied to it, inside of the container that holds the elements that have the float applied to them. An example of this can be found here, which I think is what you were looking for.
try placing an outer div and set the position: relative; and the inner elements mark their position as absolute
Don't know exactly what's going on without seeing your code, but I'm wondering if you're simply just no clearing your floats?
http://www.quirksmode.org/css/clearing.html
Hi stack overflow community. I have 2 dynamic divs that I want to float right inside a container. But I want the last div on the HTML to be more on the right than the first one. My problem is that I can't change the HTML, only CSS.
This will be used for navigation between pages, so I can have both divs visible or only one. Even if I only have one div, it has to be aligned to the right of the container (that's why I wanted to use floats).
Here's a jsfiddle for you to understand better: http://jsfiddle.net/Cthulhu/yVCDZ/1/
I want "Next" to appear after "Previous". Thanks in advance.
Instead of float, use display:inline-block; and set the container's text-align:right;
I updated your fiddle: http://jsfiddle.net/mestekweb/yVCDZ/2/
That should get you started, at least.
ps - You will probably have problems with IE <8. I can offer some assistance there as well, if you need.
Quick update using positioning:
#container {
width:300px;
height:70px;
border:1px solid black;
position: relative;
}
#previous {
width:70px;
height:70px;
background:gold;
position: absolute;
right: 70px;
}
#next {
width:70px;
height:70px;
background:lightblue;
position: absolute;
right: 0;
}
As per i understand may be that's you want. You can use direction with display:inline-block;
Check this http://jsfiddle.net/yVCDZ/3/
& there is an other alternative which work in all browsers
Check this http://jsfiddle.net/yVCDZ/8/
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/