Then i add some text in my absolute block inner div it dosn't expand.
I know that exapanding forbids a parent container width: <div class="main_wrap"></div>.
But I can't remove it from him.
So i want to find a solution how i can correct it without a js. How can i do this? It must to expand in width, not in height, talking about this element: <div class="abs">. IF you remove a width from .main_wrap it's correct view, but i need to reach results like this without removing width, because it's just little part of huge grid.
HTML:
<div class="block">
<div class="abs">
<table class="whf table">
<tr>
<td>
<div class="image">
<div class="shadow"></div>
<img src="http://boardingarea.com/blogs/deltapoints/files/2012/07/test.jpg" width="77" />
</div>
</td>
<td class="vamid">
<div class="text">
Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
</div>
</td>
</tr>
</table>
</div>
Here is full example:
http://jsbin.com/uqafuq/6/edit
Thanks in future.
I don't know if I understood you correctly and your construction looks quite strange, but is this what you wanted to achieve? http://jsbin.com/uqafuq/11/edit
Just remove the height: 100% from .abs
Just delete your height: 100% from .abs your setting your height from the elements parent which dont have height at all
Add display: inline-block; to .block
Related
I have this layout: https://postimg.org/image/74ioib3y7/
The rules of the game are:
The container must be at least 210px wide and 85px high
Row1 should be able to grow as wide as it needs to and wrap words only when the container is as big as its container
Row2 has to be as wide as Row1 => it should wrap words and not stretch the container when the content of Row2 is wider than the content of Row1
I have managed to do everything except 3.
EDIT: JSFiddle
IGNORe THIS MUST HAVE IT TO PASTE JSFiddle
Please help
This should solve your request:
.container {
display: inline-block;
background: aliceblue;
min-width: 210px;
min-height: 85px;
position: relative;
}
.maxim {
position: absolute;
width: 100%;
max-width: 100%;
background-color: lime;
}
<div class="container">
<header>
<strong>12345620</strong>
<span>description</span>
</header>
<span class="maxim">
Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum oposum
</span>
</div>
<div class="container">
<header>
<strong>1234567890</strong>
<span>description and more text is here also possible</span>
</header>
<span class="maxim">
Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum oposum
</span>
</div>
as you can see on this jsfiddle, if you play with the window size, the lorem ipsum text sometimes goes outside the white container.
I can't figure out why, because when I look at the code, everything seems to be embedded within the main container so I would expect the text to adapt the fluidly adapt to the window size.
What is the issue?
Thanks,
<section>
<div class="container content">
<div class="row">
<div class="col-md-3 bordering">
<h2>Qui <b>sommes-nous?</b></h2>
<h3>Actifs depuis </h3></div>
<div class="col-md-9">
<div class="title-block">
<p>
Lorem ipsum dolor sit amet, connecteur adipiscin
<p>
etc.
It is because you have applied a fixed width to .container:
.container {
width: 1260px; /* remove or edit this line */
}
I try to understand the following layout situation: i got a floating div with an undefined width that acts as a container. inside i got a left floating header. the there is unfloated div that wraps another left floated div. the unfloated div is for hiding content with a small viewport but that does not matter for the observation.
you can see the layout structure here: jsfiddle before
<div class="container" style="float: left">
<div style="float: left">HEADER</div>
<div style="border: 1px solid green;">
<div style="float: left">
<div class="element">lorem ipsum dolor sit amet. </div>
<div class="element">lorem ipsum dolor sit amet. lorem ipsum dolor sit amet.</div>
<div class="element">lorem ipsum dolor sit amet. </div>
</div>
</div>
</div>
in this fiddle, when i add Text into the unfloated div, the whole container extends its width. see here: jsfiddle with text.
<div class="container" style="float: left">
<div style="float: left">HEADER</div>
<div style="border: 1px solid green;">TEXT
<div style="float: left">
<div class="element">lorem ipsum dolor sit amet. </div>
<div class="element">lorem ipsum dolor sit amet. lorem ipsum dolor sit amet.</div>
<div class="element">lorem ipsum dolor sit amet. </div>
</div>
</div>
</div>
why is that? it seems like the browser is measuring the whole width in one line and then drops the floated div with the 3 elements one line below? this is another issue i don't understand but this is already discussed here: Right floated container results in line break.
why is the containing div becoming wider when there is already enough space for the text to float next to the header?
edit1: it seems that in ie this works without wrapping the float to another line. is this a browser issue in chrome/ff?
edit2: i think all the problems can be summarized by not establishing a consistent set of block formatting contexts. an unfloated div within a floated div with floated children seems to be "undefined" and a situation that browsers interpret differently. solution is to establish consistent BFCs.
Thanks for your help
Patrick
It seems like you may not have a solid feel for exactly how floats work, and how adjacent floated, and unfloated, content acts around them (dont worry, it can be tricky to grasp and takes time).
If Im right in my understanding of the issue, you want to establish a correct block formatting context for the div with the green border, this can be established by adding overflow:auto (amongst other approaches)
A block formatting context is a part of a visual CSS rendering of a
Web page. It is the region in which the layout of block boxes occurs
and in which floats interact with each other.
You can generally see when you may need to establish a block formatting context when working with floats, as the content appears collapsed. You can see this in your original fiddle, in that the div with the green border does not extend around the boundaries of its floated contents. Adding overflow:auto restores the anticipated behavior.
Demo Fiddle
I'm building a Single-Page layout with a navigation for scrolling to several anchors (anchor locks on top of the page - height of the header). The scrolling content is only structured in headlines <h3> and paragraphs <p>. Works well so far, but the last section of the page is quite short, so it gets stuck on the page's bottom and has not enough "space/content" to even arrive at the top of the page.
Does anyone know a way to extend the very last <p> to the browser's height (- the header's height), so that it can reach the top?
CSS-only would be great, jQuery is fine aswell.
Thanks!
From your description you seem to have something like this, where I'm giving your "scrolling content" area an id of application-body like this:
<div id="application-body">
<h3 id="n-1">Headline 1</h3>
<p>Lorem ipsum </p>
<h3 id="n-2">Headline 2</h3>
<p>Lorem ipsum </p>
<h3 id="n-3">Headline 3</h3>
<p>Lorem ipsum </p>
<h3 id="n-4">Headline 4</h3>
<p>Lorem ipsum </p>
<h3 id="n-5">Headline 5</h3>
<p>Lorem ipsum </p>
<h3 id="n-6">Headline 6</h3>
<p>Lorem ipsum </p>
<h3 id="n-7">Headline 7</h3>
<p>Lorem ipsum </p>
<h3 id="n-8">Headline 8</h3>
<p>Lorem ipsum </p>
<h3 id="n-9">Headline 9</h3>
<p>Lorem ipsum </p>
<h3 id="n-10">Headline 10</h3>
<p>Lorem ipsum </p>
<h3 id="n-11">Headline 11</h3>
<p>Lorem ipsum </p>
</div><!--#application-body-->
And you want to make the last element in that list - the last <p> element in this case, artificially taller so it will work correctly. If I'm not mistaken I think what you want is this:
#application-body p:last-child {
color: red;
height: 1000px;
}
Which will increase the height arbitrarily as you see fit. Not sure what the constraints of your page are, but you could also experiment with other units. I don't think percentage height will do what you intend though. em might work as well. You might also consider setting the height with a media query so that if the height was not very tall you could set it lower.
Here's more about :last-child
If you simply must use jQuery or must get precise about the height you want, you'd want to use this chunk of jQuery. Note that your header must have an id of header for this code to work. Adjust to your own site.
var targetHeight = $(window).height() - $('#header').height();
$('#application-body p:last-child').height(targetHeight);
I want to expand my div height by 100%, but it is not working:
So far, my code is:
.add{
border:1px solid #ddd;
display:block;
float:right;
margin:0 0 10px 10px;
padding:10px;
height:100%;
}
And the HTML:
<div>
<div class="add">
<div style="width:100px;height:400px;background:#ccc;"></div>
</div>
Lorem ipsum dolor sit amet... And a lot of text here
Lorem ipsum dolor sit amet... And a lot of text here
Lorem ipsum dolor sit amet... And a lot of text here
</div>
You should have specified the height of the outer div. Something like this will work:
<!doctype html>
<html>
<head>
<style>
.add
{
border:1px solid #ddd;
display:block;
float:right;
margin:0 0 10px 10px;
padding:10px;
height:100%;
}
</style>
</head>
<body>
<div style="height: 768px;">
<div class="add">
<div style="width:100px;height:400px;background:#ccc;"></div>
</div>
Lorem ipsum dolor sit amet... And a lot of text here
Lorem ipsum dolor sit amet... And a lot of text here
Lorem ipsum dolor sit amet... And a lot of text here
</div>
</body>
</html>
From the CSS 2.1 Spec:
percentage
Specifies a percentage height. The percentage is calculated with respect to the height of the generated box's
containing block. If the height of the containing block is not
specified explicitly (i.e., it depends on content height), and this
element is not absolutely positioned, the value computes to 'auto'.
So, since the containing block has no specified height, the floated element's height is auto.