I have 2 divs, one nested inside of the other. According to the page design, the nested div needs to appear to be "on top of" the parent div, as in:
(source: cloudfront.net)
I've got the CSS coded for both elements, using a negative top margin on the nested div to attempt to simulate the desired effect. However, instead of appearing outside of the parent's bounds, the nested div's top 10px or so are getting cut off, as in:
(source: cloudfront.net)
I don't want to position the element absolutely, because a goal for this page is that it be responsive.
HTML for divs:
<div class="container-div">
<div class="child-div">
...
</div>
</div>
CSS for the divs:
.container-div {
padding: 10px 10px 0;
}
.child-div {
display: inline-block;
width: 100px;
height: 60px;
margin: -15px 10px 0;
border: 1px solid #efefef;
background-color: #fff;
}
You don't need to apply position:absolute to the nested div.
And margin probably wouldn't be the best practice in this case.
Just add position:relative to the nested div, and set it's top to any number you want. In your case, it would probably be negative.
Check out this Fiddle.
overflow: hidden on the parent would have done it perfectly !
Related
I have the following code:
<div style="width: 100px;
overflow: hidden;
border: 1px solid red;
background-color: #c0c0c0;
padding-right: 20px;
">
2222222222222222222222111111111111111111111111113333333333333333333</div>
(XHTML 1.0 transitional)
What happens is that the padding-right doesn't appear, it's occupied by the content, which means the overflow uses up the padding right space and only "cuts off" after the padding.
Is there any way to force the browser to overflow before the padding-right, which means my div will show with the padding right?
What I get is the first div in the following image, what i want is something like the 2nd div:
image
I have the same problem with the overflow:hidden; obeying all the padding rules, except for the right hand side. This solution works for browsers that support independent opacity.
I just changed my CSS from:
padding: 20px;
overflow: hidden;
to
padding: 20px 0 20px 20px;
border-right: solid 20px rgba(0, 0, 0, 0);
Having container divs works fine, but that effectively doubles the amount of divs on a page, which feels unnecessary.
Unfortunately, in your case this won't work so well, as you need a real border on the div.
Your best bet is to use a wrapping div and set the padding on that.
I had a similar problem that I solved by using clip instead of overflow. This allows you to specify the rectangular dimensions of the visible area of your div (W3C Recommendation). In this case, you should specify only the area within the padding to be visible.
This may not be a perfect solution for this exact case: as the div's border is outside the clipping area, that will become invisible too. I got around that by adding a wrapper div and setting the border on that, but since the inner div must be absolutely positioned for clip to apply, you would need to know and specify the height on the wrapper div.
<div style="border: 1px solid red;
height: 40px;">
<div style="position: absolute;
width: 100px;
background-color: #c0c0c0;
padding-right: 20px;
clip: rect(auto, 80px, auto, auto);">
2222222222222222222222111111111111111111111111113333333333333333333</div>
</div>
Wrap the div and apply padding to the parent
.c1 {
width: 200px;
border: 1px solid red;
background-color: #c0c0c0;
padding-right: 50px;
}
.c1 > .c1-inner {
overflow: hidden;
}
<div class="c1">
<div class="c1-inner">2222222222222222222222111111111111111111111111113333333333333333333
</div>
</div>
If you have a right-adjacent element to the one in question, put padding on its left. That way the content from the left element will flow up to but not past its margin, and the left padding on the right-adjacent element will create the desired separation. You can use this trick for a series of horizontal elements which may have content that needs to be cut off because it is too long.
I am a bite confused on what is happening here. I put my body margin set to 0 in my css and then all the div elements stretch across the screen like I want, but I want this to apply for only one. From a previous question: HTML Image going across entire screen
An answer said to use position:absolute and then change the position of the div elements. I used to have position:relative on these div elements and when I changed that to absolute, it combined all the div elements in one position. I tried moving them with bottom:then whatever pixels, but still did not move it at all. Would this be the way to move it? What would I do? On W3 schools: http://www.w3schools.com/css/css_positioning.asp
It tells me a lot about positioning div elements, but when I tried to use this it did not work on one div element I tried, but instead overlapped it.
How would I move these div elements?
Code CSS
#middle-4{
position:absolute;
left:0;
right:8;
bottom:0;
top:-800px;}
Code HTML
<div id="middle-4" style="background-image: url(images/Home/rock.png); height: 540px; width: 1348px; border: 1px solid black;"></div>
This is done so for as you can see up to 4 div elements.
If I understand your question correctly you want all element to conform to the default body margin except one element (or multiple elements using a class).
I would do it like this...
Give body a specific margin to ensure it is consistent across browsers.
Use negative horizontal margins to pull your element outside of the constraints of body
body {
margin: 8px;
background: lightGreen;
}
div {
background: lightBlue;
padding: 30px;
border-bottom: 1px solid blue;
}
.fullwidth {
margin-left: -8px;
margin-right: -8px;
}
<div>I'm constrained by body</div>
<div class="fullwidth">I'm full width</div>
<div>I'm constrained by body</div>
Setting margin on body only ensures cross-browser consistency as mentioned by uʍopǝpısdn
If you have 4 divs containing an image each, you should stick to position: relative - this will line up the divs / images vertically on top of each other.
Your issue might have to do with image sizes - if you want all images to keep their original size, you can keep their attributes for width and height as specified in your example "middle-4": height: 540px; width: 1348px;
However - do you want one div / image to stretch across the width of body / screen, you will have to apply the size in percentage - this can be done in 2 ways:
CSS3 - you have the options of "cover" or "contain", which can be applied to div as youre doing it now - example:
div {
background: url(images/Home/rock.png);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
CSS2 - you can apply a class to the image itself, and forget about the surrounding div - example:
<img src="images/Home/rock.png" class="img_width" />
.img_width {
width: 100%;
height: auto;
}
Now after several hours, I am still stuck at this problem; I am trying to make this box relatively positioned so that the results do not overlap my footer. I tried to achieve this via javascript and that did not work and now I am not sure how to make this relatively aligned.
Here is the jsfiddle: http://jsfiddle.net/Lp2kV/1/
I am sure the problem can be solved if I change content from absolute to relative but after that I am not able to align it the same way as now.
This is the part, where I think I need to edit positioning.
.content {
position: absolute;
top: 28px;
left: 0;
background: #eee;
right: 81px;
min-height: 200px;
padding: 20px;
border: 1px solid #ccc;
height:auto;
}
If you only want the result contents to be contained inside the DIV area and have a scrollbar at the right side, you can add the following property inside your .content selector. This is if you want the height to stay the same.
overflow: auto;
But if you want the height to be flexible, then you should implement this approach..
First, remove the height property.
<div id="results_1">
<div style="clear: left; height: 0; margin: 0; padding: 0;">
will become
<div id="results_1">
<div style="clear: left; margin: 0; padding: 0;">
Before the closing tag of <div class="content">, you should add <div style="clear: both;"></div>. This will automatically expand the gray container height depending on content.
Maybe what you'll have to do next is have a javascript code to compute height of the contents box then adjust the top margin of your footer via javascript so they won't overlap.
I highly suggest just use a jquery plugin instead to create a tabbed box and disregard my solutions. This will solve your positioning problems. The only way you were able to overlap .content boxes is because they are absolutely positioned.. and absolute positioned elements do not add up to the size of their parents. So the moment you change absolute to relative, the tabs will scatter because each tab will expand to the size of their child elements. You can't achieve tabbed boxes and not overlap the footer with your current approach, unless you use javascript, or apply overflow: auto; on the .content selector.
Hope this helps.
I want to display 2 divs in a single line. I have a parent div and two child divs.I want to keep the width of first child div and parent div equal. So the header(label of first child div) displays always middle position of parent div and I want to display the second child div at the right side in the same line of parent div.(Condition is always label of first child div should display middle of parent div). Here is the jsfiddle.
If I were styling this header section for a website, and I wanted some flexibility in styling the various elements, here is out I would start.
For my HTML:
<div class="head">
<div class="innerfirst">
<h1>ABCDEF GHIJ</h1>
</div>
<div class="innersecond">
<label>RIGHT1</label>
<label>RIGHT2</label>
</div>
</div>
I would put the page title in a <h1> tag so that I can adjust font-size, padding, background color and so on. In fact, you could add a tag line below the title line and various background images. Having .innerfirst and h1 gives you quite a bit of flexibility.
The <label> tags don't make sense semantically in this context, but perhaps you will have have input fields later like a search box.
For the CSS:
.head {
background-color:#2191C0;
width: 100%;
height: 85px;
position: relative;
}
The above is fine, set position: relative so that you can use absolute positioning for one of the child elements. The fixed height is a good idea, makes it easier to adjust elements vertically.
.innerfirst {
}
.innerfirst h1 {
text-align: center;
color: #FCFCFC;
padding-top: 10px; /* You could also use a margin... */
}
By default, .innerfirst will have 100% width since it is an in-flow block element, same with the h1 element. You can center the text within h1, and adjust color, padding and margin as needed.
.innersecond {
border: 2px solid lightgray;
color: white;
position: absolute;
width: 25%; /* Set this or by default it will shrink-to-fit content */
height: 61px; /* Set this or by default it will shrink-to-fit content */
top: 5px;
right: 5px;
padding: 5px;
}
What you could do is create a box of text and absolutely position it to the right. It is a good idea
to set a height and width otherwise, as a result of the absolute positioning, the div will shrink to fit the content, which is sometimes useful. The top and right offsets will position the .innersecond to the top-right of the parent container because you set position: relative in .head.
.innersecond label {
display: block; /* optional if you want block behavior */
border: 1px dotted white;
}
Finally, if you want the label tags to behave like blocks, use display: block and style according to you design requirements.
For reference, demo fiddle: http://jsfiddle.net/audetwebdesign/qpb9P/
Here's an updated jsfiddle. Read up on the display property!
I have the following code:
<div style="width: 100px;
overflow: hidden;
border: 1px solid red;
background-color: #c0c0c0;
padding-right: 20px;
">
2222222222222222222222111111111111111111111111113333333333333333333</div>
(XHTML 1.0 transitional)
What happens is that the padding-right doesn't appear, it's occupied by the content, which means the overflow uses up the padding right space and only "cuts off" after the padding.
Is there any way to force the browser to overflow before the padding-right, which means my div will show with the padding right?
What I get is the first div in the following image, what i want is something like the 2nd div:
image
I have the same problem with the overflow:hidden; obeying all the padding rules, except for the right hand side. This solution works for browsers that support independent opacity.
I just changed my CSS from:
padding: 20px;
overflow: hidden;
to
padding: 20px 0 20px 20px;
border-right: solid 20px rgba(0, 0, 0, 0);
Having container divs works fine, but that effectively doubles the amount of divs on a page, which feels unnecessary.
Unfortunately, in your case this won't work so well, as you need a real border on the div.
Your best bet is to use a wrapping div and set the padding on that.
I had a similar problem that I solved by using clip instead of overflow. This allows you to specify the rectangular dimensions of the visible area of your div (W3C Recommendation). In this case, you should specify only the area within the padding to be visible.
This may not be a perfect solution for this exact case: as the div's border is outside the clipping area, that will become invisible too. I got around that by adding a wrapper div and setting the border on that, but since the inner div must be absolutely positioned for clip to apply, you would need to know and specify the height on the wrapper div.
<div style="border: 1px solid red;
height: 40px;">
<div style="position: absolute;
width: 100px;
background-color: #c0c0c0;
padding-right: 20px;
clip: rect(auto, 80px, auto, auto);">
2222222222222222222222111111111111111111111111113333333333333333333</div>
</div>
Wrap the div and apply padding to the parent
.c1 {
width: 200px;
border: 1px solid red;
background-color: #c0c0c0;
padding-right: 50px;
}
.c1 > .c1-inner {
overflow: hidden;
}
<div class="c1">
<div class="c1-inner">2222222222222222222222111111111111111111111111113333333333333333333
</div>
</div>
If you have a right-adjacent element to the one in question, put padding on its left. That way the content from the left element will flow up to but not past its margin, and the left padding on the right-adjacent element will create the desired separation. You can use this trick for a series of horizontal elements which may have content that needs to be cut off because it is too long.