I have two elements that are floated left. One is the first child of the body, and the other is the first child of a container that is the second child of the body.
...
<body>
<div class='child'>
</div>
<div class='container'>
<div class='child'></div>
</div>
</body>
...
The container has a fixed width and is centred using 'margin: 0 auto;'. The intention was to allow the container child to stay left but accommodate the body child when the window is small.
The fiddle is here:
http://jsfiddle.net/mrSav/7/
This solution works fine in Chrome; you'll notice that the container child happily moves over for the body child when you make the window smaller.
However in Firefox when you make the window smaller the container child overlaps the body child.
For both children I added a hover state which effectively 'pokes the DOM' and forces Firefox to re-flow the page. When you hover the mouse over the children the page corrects itself and the children snap into the 'correct' position.
Is this a bug? Is there a work-around?
UPDATE - Container does flow under first child of body
Still using media-queries, but changing a few things to allow absolute positioning of the container child relative to the window instead of parent: DEMO
Remove position: relative from container. Separate the two child divs css and change a few styles on the container child like this:
.child {
width: 100px;
height: 200px;
background-color: white;
border: 2px dashed black;
margin: 0px;
}
body > .child {
float: left;
z-index: 1;
}
.container > .child {
position: absolute; //relative to window since parent has no position
left: 100px;
}
Then use media-query above 700px to change position to relative and left to auto:
#media screen and (min-width: 700px) {
.container > .child {
position: relative; //override absolute position
left: auto; //override left: 100px
}
}
ORIGINAL - Container doesn't flow under first child of body.
I have no idea what is causing this (I would guess it's the one floated item being taken out of the flow treated differently by Firefox), but here's a work around using media-queries: DEMO
With fixed widths, you can do something like this:
.container { //use margin-left: 100px until the total width of the window is 700px (500px + 100px + 100px = container width + 100px on either side )
margin: 0 0 0 100px;
}
#media screen and (min-width: 700px) { //700px to account for 100px of left div (.container is centered at this size)
.container {
margin: 0 auto;
float: none;
}
}
I would also add * {box-sizing: border-box;} (with appropriate prefixes, -moz-, -webkit-) to account for any borders/padding.
Related
I have a parent div which is basically a very long blog with text and images. I want a div inside it to be wider as the parent, however I don´t want it to cover the surrounding elements. Currently if I do the following it covers the h3 element below it :
.parent{
position: relative;
max-width: 800px;
}
.child{
position: absolute;
left:-17rem
}
Once you add position: absolute you remove it from the document flow, and the rest of the document is rendered as if it doesn't exist - meaning that if it's 20px tall, the content below it will move up 20px to fill that space, since they treat it as if it's not there at all.
The initial overflow value for Box, Grid, and Flex containers is set to visible - so you can position child elements outside of parent elements easily.
Consider using transform and translateX():
.parent {
width: 50%;
max-width: 400px;
}
.child {
width: calc( 100% + 40px ); /* If you want div 40px larger */
transform: translateX(-20px); /* Offset by half of that value (20px) */
}
/* Just Here for Styling Purposes */
.parent{padding:20px 0;margin:0 auto;background:#09e;}.child{background:rgba(0,0,0,.5);color:#fff;padding:10px 0;text-align:center;}.next {background:#eee;padding:20px;text-align:center;}
<div class="parent">
<div class="child">TEXT IN HERE</div>
</div>
<div class="next">This should remain where it was originally</div>
I have two elements, both with display: inline-block, and the parent has white-space: nowrap.
When the screen is resized, the div on the right side don't resize, like this.
I'm trying to make only the blue div resize.
Full source (jsfiddle)
The structure of the html is like this:
<div class="container">
<div class="header">...</div> <!-- red -->
<div class="aside">...</div> <!-- pink -->
<article>...</article> <!-- blue -->
</div>
Relevant css:
* {
box-sizing: border-box;
}
div.container {
margin: 0 auto;
max-width: 40em;
padding: 0;
white-space: nowrap;
}
div.container > * {
white-space: normal;
}
.aside {
display: inline-block;
max-width: 15em;
vertical-align: top;
}
.article {
display: inline-block;
max-width: 25em;
}
Old question, but for the sake of knowledge of anyone who reads this and also has the doubt:
What I've found is that setting position: relative on the .container
and position: absolute on the .article does what I want.
An absolute positioned element is positioned relative to the nearest positioned ancestor, where a positioned element means anything with a position property different to static, the default; if does not found any positioned element, uses the body element.
The absolute positioned elements, if has their width and heigth in auto, resizes to fit its content, and limits the maximun sizes by its positioned ancestor. You can check this putting a short string instead a large one: the element will shrink to the length of text. If you remove the positioning from div.container, the article (if still positioned absolute) will grow (depending on its content) to cover the space between previous element and body width.
And, related to the aforementioned and to add some utility to this delayed answer, a not-very-know bonus: if you define the right and left properties of a absoluted positioned element, and leave the width in auto, the element will cover the horizontal size between the right and left defined. This way you could put something like
article {
background-color: #a0f4ec;
display: inline-block;
position: absolute;
right: 0;
left: 30%;
}
div.aside {
background-color: #faf;
display: inline-block;
max-width: 15em;
width: 30%;
}
This trick also applies in a vertical sense, but with height, top and bottom properties.
There are a few ways to do it.
Method 1:
two divs the same line, one dynamic width, one fixed
Method 2 (negative margins)
http://alistapart.com/article/negativemargins
Unfortunately, Narxx's answers require the divs to be floated. I'm sure that's what you should do if you're building a real site, but in my case, I'm trying not to use it.
What I've found is that setting position: relative on the .container and position: absolute on the .article does what I want.
Simplified fiddle
If anyone can explain why, I'll mark it as an answer.
i am using a container made by myself, but, when i resize the browser window, the container moves along window, i want it static in your place.
this is the CSS:
.container {
margin-right: auto;
margin-left: auto;
width: 1000px; /* yes, because style of PSD file. need follow design */
}
margin: auto centers the .container based on the width of its parent element.
.container has a parent element with a fluid width (e.g. 100%). The width of this element changes when you resize the window, so your container will automatically recenter according to that new width.
There are a few solutions to this:
1) Wrap .container inside an element with a fixed width that won't change on browser resize.
CSS:
.wrapper-fixed-width {
width: 500px;
}
HTML:
<div class="wrapper-fixed-width">
<div class="container bg">The parent element has a fixed width (pixels)</div>
</div>
2) Set a fixed margin size to .container
CSS:
.container {
margin: 0 50px;
}
Here is a JS Fiddle that shows these examples:
http://jsfiddle.net/vH49a/4/
I am specifying a background color for the body which displays up to a certain distance only. I need it to be full height and for its child elements too. One of its child elements has border-right which also needs to show over the full screen height.
My CSS looks like(sample one) better check my demo
demo page
html,body {
height: 100%;
background-color: #fefefe;
}
.cover {
height: 100%;
}
.left_side {
float: left;
height: 100%;
border-left: 1px solid #ccc;
width: 31%;
}
and html is
<body>
<div class="cover">
<div class="left_side">
</div>
</div>
</body>
and the bgcolor and childs border seems up-to some limited distance only like
what is that problem guys i need that background and border as 100% height.
Remove height:100% from your body and html style.
Instead of having a border set to the left container, try setting the border on the content container instead.
your css would be something like:
.large-9 .columns .right_side{border-left:1px solid #333;}
the left column is currently set to 100% and renders correctly. the problem is that it doesnt take into account the overflow content you cannot see, until you scroll. The other solution would be to absolute or fixed position the left container, and set its top and bottom values to 0.
css for that would be something like:
.left_side .full_height{position:fixed;top:0;bottom:0;width:200px;}
Here's a really basic layout with a fixed left column - http://jsfiddle.net/WAJtk/
and a version with a fixed header too - http://jsfiddle.net/WAJtk/1/
you might also like this pen - http://codepen.io/lukeocom/pen/KqAfG
You could use absolute position and setting top and bottom:
body {
position: absolute;
top: 0;
bottom: 0;
}
I have a <div id="wrapper"></div> with
#wrapper {
height: 300px;
margin: 10px;
position: absolute;
top: 0;
left: 0;
width: 400px;
}
When I resize the viewport so that horizontal scrollbars appear, the right margin disappears; I can only scroll as far right at the element's content, but I want the margin to be present on all sides. It also happens to the left margin if right: 0; is applied, and to the bottom margin if the viewport is made shorter. Giving wrapper a position: static; (default) makes no difference.
Why is this happening? It doesn't follow normal margin collapse rules. How can I get my margin back? I've tried giving the body padding/margin.. nada.
jsFiddle
Background Info
The default width of the body element is the html width which is also the window width (or iframe width in such a case). The default behavior of a block level element is that the scroll only accounts for the actual element (hence, it doesn't care about the right margin if there is nothing more to display on the right). This causes your right margin issue. (By the way, according to this article, the scroll bars are actually appearing on the html element, not the body.)
For Position: Absolute
By having #wrapper with position: absolute, the body element ends up with zero height. This causes your bottom margin issue in this case.
A solution is to account for the margins like so (see fiddle):
body {
min-height: 320px;
min-width: 420px;
}
This assigns a minimum dimension to the body equal to the width + margins and height + margins of the absolute element.
Now, I'm not sure what you expect to happen if you have right: 0 set, as forcing a left margin to "remain" just ends up causing, in my opinion, a premature scroll bar to activate. See this fiddle.
Regarding Position: Static
The default block level behavior can be changed by forcing a shrink-wrap like behavior on the body element using (see fiddle):
body { display: inline-block; }
Note: that body { float: left; } did not give me the same shrink-wrap behavior (see fiddle).
The inline-block element will account for the margin of its inner elements to determine its own width, which then allows the right margin to work.
The reason the display: inline-block; solution does not work on the #wrapper being position: absolute is because it makes the body have a zero width and height, since the absolute positioning takes that element out of flow and there is nothing left inside body to give it dimension.
The above was currently only tested on IE9.
I'm afraid there's only one simple and quick solution, and that is to create a new div inside the wrapper div.
http://jsfiddle.net/QHKmN/2/
CSS
#wrapper {
background: black;
height: 300px;
margin: 10px;
position: absolute;
top: 0;
left: 0;
width: 400px;
}
#inwrapper {
background: green;
height: 290px;
margin: 5px auto;
position: relative;
width: 390px;
}
HTML:
<div id="wrapper">
<div id="inwrapper">
</div>
</div>
And there's your margin.