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.
Related
I have a CSS column layout.
I find however, that there is an unnecessary gap at the bottom (indicated by the pink arrow in screengrab).
This gap disappears if I remove display: inline-block from the CSS, but then some of the <section> elements break in two. I've also tried using break-inside: avoid but it appears to do nothing at all.
Is there a fix for this?
<div class="feed-index">
<div class="feed">
<section>
Lorem ipsum dolor sit amet
</section>
<section>
Lorem ipsum dolor sit amet
</section>
<section>
Lorem ipsum dolor sit amet
</section>
<section>
Lorem ipsum dolor sit amet
</section>
<section>
Lorem ipsum dolor sit amet
</section>
</div>
</div>
.feed-index .feed {
column-count: 3;
column-gap: 40px;
}
.feed-index .feed > section {
display: inline-block;
margin-bottom: 50px;
overflow: hidden;
}
Add vertical-align:top; to your CSS for .feed-index .feed > section
The reason is your overflow: hidden; actually changes the block. See more info here: Why does x-overflow:hidden cause extra space below?
i must use css to alter the positions; the only thing that seems to be working is the right position nav bar and the liquid layout, but the "content" and "right navigation bar" is ot being positioned properly.
I want content to be in the middle, leftnavigation on the left, and right navigation on the right.
<title>CSS liquid layout</title>
<style type="text/css">
.due {
color: #ff0000;
font-weight: bold;
}
#leftnavigation{
position:absolute;
left:10px;
top:10px;
width:250px;
}
#rightnavigation {
float:right;
width:250px;
height:800px;
}
#content {
float:center;
}
</style>
</head>
<body leftmargin="0" topmargin="0" bgcolor="#ccff99">
<div id="app">
<div id="rightnavigation">
<h1>Right Navigation</h1>
link Instructor
Course <a href="http://www,google.com">
Resume
project
</a>
</div>
<div id="content">
<h1>Sample Content</h1>
<p>
This is the content section of the page. Use structural markup
like <p></p>
to keep the page valid in XHTML.
</p>
<h2>Lorem Ipsum</h2>
</div>
<div id="leftnavigation">
<h1>Left Navigation</h1>
<p>
Page 1 Page 2 <a href="http://www,google.com">
Page
3
</a> Page 4 Page 5 <br />
Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. Lorem ipsum sit dolor
amum.
</p>
<h2>Lorem Ipsum</h2>
</div>
</div>
You could try this:
CSS
.app {
width: 100%
height: 100%;
}
.due {color: #ff0000;
font-weight: bold;
}
#rightnavigation {
float: left;
width: 33.333%
}
#leftnavigation{
float: left;
width: 33.333%
}
#content {
float: left;
width: 33.333%;
}
HTML
<div class="app">
<div id="leftnavigation">
<h1> Left Navigation </h1>
</div>
<div id="content"></div>
<div id="rightnavigation">
<h1>Right Navigation</h1>
</div>
</div>
Here's a live demo of the example - EXAMPLE
There are some errors in your HTML and CSS that need to be addressed before changing the styles to accomplish what you need.
In your HTML, there are still some unclosed tags. Especially the <div id="rightnavigation"> tag is never closed, so styles applied to #rightnavigation are actually applied to the entire page.
In your CSS, you apply a style to div.content. But that div has an id of content, not a class. The identifier should be div#content.
In your CSS, you give the div with id leftnavigation a position of "left". This should be "absolute" instead.
Once that is all cleaned up, the left nav is on the left, the content is in the center, and the right nav is on the right. But the center content overlaps the right nav (I assume that is unwanted behavior). To clean that up, without changing the HTML any more, you need to give your sections widths, and set their positions based on the width of their neighboring elements.
Your HTML:
<div id="rightnavigation">
<h1>Right Navigation</h1>
</div>
<div id="content">
<h1>Sample Content</h1>
<p>This is the content section of the page. Use structural markup
like <p></p>
to keep the page valid in XHTML.</p>
<p>The styled document should look like your printed version/screenshot.
Add styles to the left navigation links to give them borders and a
background color that changes when moused over (hint: Define navigation
links as display:block;). For the right side links, use a different
background color change and border as ashown.
Make the center column "liquid" or "elastic." Use an external (linked)
CSS file. Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum.
Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. Lorem ipsum sit
dolor amum.
Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. </p>
<h2>Lorem Ipsum</h2>
<p> Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum.
Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum.
Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. </p>
<p><span class="due">Due Tuesday, September 22.</span> Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum.
Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum.
Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. </p>
</div>
<div id="leftnavigation">
<h1>Left Navigation</h1>
<p><br>Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. </p>
<h2>Lorem Ipsum</h2>
</div>
And your CSS:
#rightnavigation {
position: absolute;
top: 50px;
right: 0px;
width: 25%;
}
#content {
position: absolute;
top: 50px;
left: 25%;
width: 50%;
}
#leftnavigation{
position: absolute;
top: 50px;
left: 0px;
width: 25%;
}
.due {
color: #ff0000;
font-weight: bold;
}
I'm trying to align to the left an image with a width which is relative to the page width. There are couple of unfortunate constraints which I cannot change:
the image has a wrapper,
I cannot apply width to the wrapper because class responsible for the width is applied to the image (and I cannot change that too :D),
the solution must be CSS-only.
The structure looks like this:
<p>Lipsum...</p>
<div class="align-left">
<img src="http://lorempixel.com/1000/1000/" class="width50" alt="lipsum" width="1000" height="1000">
</div>
<p>Lipsum...</p>
CSS:
.align-left {
float: left;
background: red;
padding: 10px;
}
.width50 {
width: 50%;
height: auto;
}
See: http://jsfiddle.net/xnt27crz/2/
Question: Is it possible to style the div.align-left in a way that it does not take 100% width? Its width should equal the width of an image + its own padding.
More facts:
The closest I got was to float the image, not the div (so it is 0px high), but it was awful and caused other issues.
I think that this can be achieved with flexbox, but I'm looking for IE9+ support.
I'm looking for a "safe" solution because it will be then used by many developers in many scenarios that I cannot predict.
Edit: The real case is much more complicated, hence the constraints. You can see the example here: http://jsfiddle.net/n1kayb2o/3/. Note that the structure inside the editor is different than the input HTML. There's additional wrapper which glues together the figure and the drag handle that it has and some other elements that may be needed (e.g. an overlay).
Tough problem. I had to read the spec to help you out and here is my result.
It's impossible to solve the problem with the given constraints since it all depends on the width of the image (also called "replaced element")
Why?
Let's read the spec http://www.w3.org/TR/CSS2/visudet.html#float-width
If 'margin-left', or 'margin-right' are computed as 'auto', their used value is '0'.
If 'width' is computed as 'auto', the used value is the "shrink-to-fit" width.
Calculation of the shrink-to-fit width is similar to calculating the width of a table cell using the automatic table layout algorithm. Roughly: calculate the preferred width by formatting the content without breaking lines other than where explicit line breaks occur, and also calculate the preferred minimum width, e.g., by trying all possible line breaks. CSS 2.1 does not define the exact algorithm. Thirdly, find the available width: in this case, this is the width of the containing block minus the used values of 'margin-left', 'border-left-width', 'padding-left', 'padding-right', 'border-right-width', 'margin-right', and the widths of any relevant scroll bars.
Then the shrink-to-fit width is: min(max(preferred minimum width, available width), preferred width).
Lets do the "math" for your case
Preferred minimum width = 1000px (real width of the image)
Available width = assume 1990 (roughly page width)
Preferred width = 1000px (real width of the image)
min(max(1000, 1990), 1000) = 1000
As a proof http://jsfiddle.net/xnt27crz/5/ with 200px image
Summary
In your case the floated div will get the width equal to the real width of the image.
Question: Is it possible to style the div.align-left in a way that it does not take 100% width? Its width should equal the width of an image + its own padding.
This is an example https://jsfiddle.net/n1kayb2o/5/
But if you want it more responsive, that max-width of the container (figure) will not exceed it's container - then it could be much more complicated. Especially if you want your class image30 to have for example 30% of it's container even if image inside it is more wider.
If I understood your question correctly, you can just add all the styles to the image itself.
.align-left .width50 {
float: left;
width: 50%;
height: auto;
padding: 10px;
background: red;
}
.align-left .width50 {
float: left;
width: 50%;
height: auto;
padding: 10px;
background: red;
}
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>
<div class="align-left">
<img src="http://lorempixel.com/1000/1000/" alt="lipsum" width="1000" height="1000" class="width50">
</div>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>
Edit: this doesn't solve issue (after OP clarified the question) as the parent div still collapses. But I'll keep it here, someone might be interested in it in the future.
Can't you just do the width 50% to your align-left div, and then do a 100% on the image? Now the div would be 50% of the page, and left floated, while the image is 100% inside this div?
I really don't know if this is the solution or not because it seems too simple..
And maybe I've misunderstood your answer.
Anyway,
Greetings and good luck!
This seems so trivial, but how do I make the background color or image of a div span the whole window, but keep the content in a wrapper or set width? Almost like a footer, or nav.
Like on this page in the footer, the gray and the lack parts go the whole across the page but any type is still in a set width that matches the rest of the page. Some pages have these in the middle and divide their whole page using this technique.
Thanks for any help!
For a content wrapper, make the wrapper div fixed width and use margin: 0 auto to center it horizontally - http://codepen.io/anon/pen/kwebf
<style type="text/css">
body {
background: #ff0000;
}
div {
margin: 0 auto;
width: 500px;
}
</style>
<body>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</body>
For fixed width content without a wrapper, put horizontal padding on your body - http://codepen.io/anon/pen/hoKdk
<style type="text/css">
body {
padding: 0 200px;
background: #ff0000;
}
</style>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</body>
you could either wrap each section in an element (A) just to span across the page and prodive the background, and wrap the content in an element (B) to center it in A. like this:
<div id="main-wrap">
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div id="footer-wrap">
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<style>
#main-wrap {
background:red;
}
#footer-wrap {
background:green;
}
.content {
width:300px;
margin:0 auto;
}
</style>
or you could use an advanced solution similar to this one.
it really depends on your design and requirments
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