I'm trying to resize an img proportionally with the container. The IMG floats left and there is a paragraph wrapping around it.
HTML:
<div>
<img src="picture.png">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vestibulum venenatis libero, eu egestas elit laoreet nec. Donec in nunc dictum nunc luctus eleifend sagittis id augue.</p>
</div>
CSS:
div {
width: 80%;
}
img {
max-width: 100%;
float: left;
margin: 0 10px 10px 0;
}
The image gets resized only when the left div border hits the image and the paragraph is completely bellow the img. I want to resize the img as soon as the div resizes. I know I can put the img in a wrapper div and give it a percentage width, but I'd like a cleaner solution, if it's possible.
JSFiddle: http://jsfiddle.net/989uX/
The 'max-width' CSS property sets the maximum content width of the IMG element. In other words, this element is never wider even if you set a bigger width.
If you want to re-size the element you should use the 'width' property instead of 'max-width'. This property accepts also percentage values (as Passerby mentioned above). Note that percentage values of the element refer to the width of the containing block.
Related
I have a web page that consists of a header, slider menu content and footer.
I need the content to start from the menu (menu size and location is based on the elements above that depends on device), and it should always be 25px from the bottom overlapping the footer.
If I try to make it relative, it hangs to the middle and doesn't reach the end, if I make it absolute, I have to specify the value it should be started from which is dynamic.
Is there an efficient way to do this?
UPDATE
I don't mind doing it with jQuery as long as the top of the content is dynamic and depends on the previous element no matter what it is.
UPDATE
Here's an abstract example to what I need.
The footer should always be anchored to the bottom (later I'll apply sticky footer technique, here my issue is the content), the header, slider and menu are anchored to element above, the content should be anchored to the element above and to the footer.
your not very clear with what you want exactly. so I've made some assumptions.
(all of those assumptions can be corrected if I assumed wrong).
Assumptions:
Header should scroll with the content. (that behavior can be changed if you want)
the scroll should be applied on the 'Content Zone' only. (that behavior can be changed if you want)
the content wrapper should always span to the end of the page, even if the physical content is smaller then that. and should have a scrolling only when the physical content is larger than the available space. (that behavior can be changed if you want)
[as you can see, all of those behaviors can be changed with the correct CSS]
Here is a Working Fiddle
this is a pure CSS solution. (I always avoid scripts if I can)
cross browser (Tested on: IE10, IE9, IE8, Chrome, FF)
HTML: (I've added a wrapper for the scroll-able content)
<div class="scollableContent">
<div class="header">
<h1>header</h1>
</div>
<div class="main">
<h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque lacinia tempus diam in malesuada. Aliquam id enim nisl. Integer hendrerit adipiscing quam, fermentum pellentesque nisl. Integer consectetur hendrerit sapien nec vestibulum. Vestibulum ac diam in arcu feugiat fermentum nec id nibh. Proin id laoreet dui, quis accumsan nisi. Quisque eget sem ut arcu faucibus convallis. Sed sed nisl commodo, faucibus leo sed, egestas est. Cras at nibh et erat ullamcorper sollicitudin vitae non nibh.</h1>
</div>
</div>
<div class="footer">
<h2>footer</h2>
</div>
CSS:
*
{
padding: 0;
margin: 0;
}
.scollableContent
{
position: absolute;
top: 0;
bottom: 25px; /*.footer height*/
overflow: auto;
}
.scollableContent:before
{
content: '';
height: 100%;
float: left;
}
.header
{
/*Addition*/
background-color: red;
}
.main
{
/*Addition*/
background-color: yellow;
}
.main:after
{
content: '';
display: block;
clear: both;
}
.footer
{
position: fixed;
width: 100%;
bottom: 0px;
height: 25px;
/*Addition*/
color: white;
background-color: blue;
}
Explanation:
The .footer is fixed to the view port bottom, with a fix height. and spans the whole view port width.
the .scollableContent is absolutely positioned to span exactly all the space between the top of the view port, and the top of the footer. with automatic overflow that allow scrolling if the content is bigger than the available space.
inside the .scollableContent we have a simple block element for the header, that will span his content height. after him we have another block element for the content itself.
now we want the content to always stretch to the end of the container, regardless of the header height (so we can't apply it with a fixed height).
we achieve this using floating & clearing techniques.
we create a floating element before the .scollableContent, with no content (so it's invisible and doesn't really take any place at all) but with 100% height.
and at the end of the content div, we create a block with clear instruction.
now: this new block cannot be position in the same line with the floating element. so he has to be moved down, dragging the content div along with him.
Et voilà!
EDIT:
you're probably going to use this solution inside some existing Container in your website. (and not as the whole website layout).
I've updated the fiddle so that the content is enclosed within a container. that way it will be easier for you to port this solution to your working website.
here is the Updated Fiddle
<style>
div {
border: 3px solid black;
height: 300px;
width: 100%;
position: absolute;
bottom: 25px;
}
</style>
<div></div>
I'm looking for a solution to have a sticky footer which height may be dependent on the width of the browser.
Sticky footers in fluid designs are not all that trivial. I've found hints, discussions and solutions to implement sticky footers. However, all these are dependent on a fixed and known height of the footer. In my case, the height of the footer contains text and the number of lines is dependent on the width of the screen.
Rather than making al sorts of media queries and building some work aorund, I'm would prefer a clean CSS solution in which the sticky footer auto adapts when the width of the screen varies.
Does anyone of you have the ultimate answer?
Welcome to the magical world of flexbox! Try this out...
http://jsfiddle.net/n5BaR/
<body>
<style>
body {
padding: 0; margin: 0;
display: flex;
min-height: 100vh;
flex-direction: column;
}
main {
flex: 1;
padding: 1em;
}
header, footer {
background-color: #abc;
padding: 1em;
}
</style>
<header>Hello World</header>
<main>Content</main>
<footer>
Quisque viverra sodales sapien, in ornare lectus iaculis in. Nam dapibus, metus a volutpat scelerisque, ligula felis imperdiet ipsum, a venenatis turpis velit vel nunc. In vel pharetra nunc. Mauris vitae porta libero. Ut consectetur condimentum felis, sed mattis justo lobortis scelerisque.
</footer>
</body>
The paddings and margins are just to be a little pretty, but the magic happens with display: flex; min-height: 100vh; flex-direction: column; and flex: 1;.
For more information and other examples, see http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/
From Mozilla...
The CSS3 Flexible Box, or flexbox, is a layout mode providing for the
arrangement of elements on a page such that the elements behave
predictably when the page layout must accommodate different screen
sizes and different display devices. ... Note: Though CSS Flexible
Boxes Layout specification is at the Candidate Recommendation stage,
not all browsers have implemented it.
Try something like this:
http://jsfiddle.net/6BQWE/2/
Where the height of the sticky footer is relative to the height of the container, with a percentage:
#sticky_footer {
position:fixed;
bottom:0;
left:0;
width:100%;
height:10%;
background:red;
text-align:center;
}
You may need to sort out some margin/padding for the text with media queries but the footer dimensions will be dynamic without them.
In this fiddle you see divs like so:
http://jsfiddle.net/tickzoom/gzREg/
<div class="excerpt">
<div class="excerpt-text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce cursus
scelerisque aliquet. Aenean tincidunt cursus adipiscing. Phasellus viverra
facilisis tortor. Pellentesque interdum scelerisque eros, id auctor est
porttitor at. Vestibulum semper lacus sed ipsum varius eu semper erat condimentum.
</p>
</div>
<div class "excerpt-more">
<p>Learn more</p>
</div>
</div>
And style like so:
.excerpt {
position: absolute;
width: 200px;
height: 100%;
}
.excerpt-text {
width: 100%;
height: 80px;
padding: 5%;
}
.excerpt-more {
height: 20px;
width: 100% color: red;
}
Notice in the fiddle that the the lipsum text of the first div overruns the Learn More text in the second div. The text needs to be bounded inside the the top div so that when the whole page is resized either more or less of text gets shown but the Learn More is always shown.
There must be something simple that I'm missing or doing wrong because I have a site where this works from a plugin on WordPress for the Genesis Framework called the Genesis Responsive Slider. The trouble with their plugin is that the "Learn More" link follows the text and so at smaller screens it disappears outside the bounding box.
So the plan is to introduce the second div to the plugin PHP code to protect the Learn More link from disappearing at smaller screen sizes.
If you want to see the temporary development site in question: http://side.tickzoom.com
Do you mean like this?
See on jsFiddle
.excerpt-text {
overflow:hidden;
}
Then making the text size larger is then a different problem of resizing the height of .excerpt-text.
See on jsFiddle
.excerpt-text {
height: 50%;
}
EDIT: Try removing the following rule
html > body .slide-excerpt-border {
float: left;
}
Also you should remove html > body from this rule so it's just .slide-excerpt-border, the start part is redundant.
EDIT: While you were fixing it I did this
I added this:
.slide-excerpt-border {
height: 95%;
display: block;
overflow: hidden;
}
And moved the Learn Move anchor down below .slide-excerpt-border
try
.excerpt{text-overflow: ellipsis;}
but check it works in all browsers you desire, it's a CSS3 property which haven't worked in most browsers not so long ago.
edit: Combination with overflow:hidden mentioned above may be the best way.
you need to use responsive media queries for different screen types.
here is an example and explanation how to use it http://css-tricks.com/css-media-queries/
or there was another question about this
Making div content responsive
I'm using Flexbox to achieve equal height columns in WebKit browsers.
I'm using this CSS...
ol {
display: -webkit-box;
}
ol li {
width: 100px;
background: #ccc;
margin: 5px;
padding: 5px;
}
...and this HTML...
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, dolor sit amet, consectetuer.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
<li>Vestibulum auctor dapibus neque.</li>
</ol>
...which produces...
jsFiddle.
As you can see, the three elements are the height of their tallest sibling (the first li).
If I removed the tallest element, I'd expect there to be a reflow in which the other elements became the height of the next tallest element.
What I expected...
What actually happened...
As an interesting note, when you start inspecting the elements in Web Inspector, the problem corrects itself. Perhaps I could reproduce this self-correcting by explicitly triggering a browser repaint, but I'd prefer not to have to introduce JavaScript for what should be handled 100% in the CSS.
Is there a way to tell Flexbox to shrink/recalculate when sibling elements are removed?
I figured this one out...
Add these two properties to the li elements...
-webkit-box-flex: 1;
min-height: 0;
jsFiddle.
Now, when you remove the first element, the others shrink to fit.
I have a website I'm working on that I should have perfected the layout on FIRST. But I am now faced with the issue of the columns not going all the way to the bottom. I have read the tutorials on how to get the 3 column layout in CSS from another person http://www.ejeliot.com/blog/61
The problem is I’m still lost. Can anyone look at this simple template (www.centuryautosd.com/help.asp )and make the CSS so that the columns go all the way down regardless of how tall this page gets? The data is generated dynamically so the height requirements will constantly change with each page that is viewed.
Here is the link to the real page: www.centuryautosd.com/help.asp
thanks!
Here you go:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #666666;
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5
browsers. The text is then set to the left aligned default in the #container selector */
color: #000000;
}
.thrColFixHdr #container {
width: 780px; /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
background: #FFFFFF;
margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
border: 1px solid #000000;
text-align: left; /* this overrides the text-align: center on the body element. */
}
.thrColFixHdr #header {
background: #DDDDDD;
padding: 0 10px 0 20px; /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
}
#contentContainer
{
overflow: hidden;
}
.thrColFixHdr #header h1 {
margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
padding: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
}
.thrColFixHdr #sidebar1 {
float: left; /* since this element is floated, a width must be given */
width: 150px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
background: #EBEBEB; /* the background color will be displayed for the length of the content in the column, but no further */
padding: 15px 10px 15px 20px; /* padding keeps the content of the div away from the edges */
margin-bottom: -2000px;
padding-bottom: 2000px;
}
.thrColFixHdr #sidebar2 {
float: right; /* since this element is floated, a width must be given */
width: 160px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
background: #EBEBEB; /* the background color will be displayed for the length of the content in the column, but no further */
padding: 15px 10px 15px 20px; /* padding keeps the content of the div away from the edges */
margin-bottom: -2000px;
padding-bottom: 2000px;
}
.thrColFixHdr #mainContent {
margin: 0 200px; /* the right and left margins on this div element creates the two outer columns on the sides of the page. No matter how much content the sidebar divs contain, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the sidebar spaces when the content in each sidebar ends. */
padding: 0 10px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
}
.thrColFixHdr #footer {
padding: 0 10px 0 20px; /* this padding matches the left alignment of the elements in the divs that appear above it. */
background:#DDDDDD;
}
.thrColFixHdr #footer p {
margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
}
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
float: right;
margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page */
float: left;
margin-right: 8px;
}
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
-->
</style><!--[if IE 5]>
<style type="text/css">
/* place css box model fixes for IE 5* in this conditional comment */
.thrColFixHdr #sidebar1 { width: 180px; }
.thrColFixHdr #sidebar2 { width: 190px; }
</style>
<![endif]--><!--[if IE]>
<style type="text/css">
/* place css fixes for all versions of IE in this conditional comment */
.thrColFixHdr #sidebar2, .thrColFixHdr #sidebar1 { padding-top: 30px; }
.thrColFixHdr #mainContent { zoom: 1; }
/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
</style>
<![endif]--></head>
<body class="thrColFixHdr">
<div id="container">
<div id="header">
<h1>Header</h1>
<!-- end #header --></div>
<div id="contentContainer">
<div id="sidebar1">
<h3>Sidebar1 Content</h3>
<p>The background color on this div will only show for the length of the content. If you'd like a dividing line instead, place a border on the left side of the #mainContent div if it will always contain more content. </p>
<p>Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. </p>
<!-- end #sidebar1 --></div>
<div id="sidebar2">
<h3>Sidebar2 Content</h3>
<p>The background color on this div will only show for the length of the content. If you'd like a dividing line instead, place a border on the right side of the #mainContent div if it will always contain more content. </p>
<p>Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. </p>
<!-- end #sidebar2 --></div>
<div id="mainContent">
<h1> Main Content </h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. </p>
<h2>H2 level heading </h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>
<!-- end #mainContent --></div>
<!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats --><br class="clearfloat" />
</div>
<div id="footer">
<p>Footer</p>
<!-- end #footer --></div>
<!-- end #container --></div>
</body>
</html>
This uses the technique described in http://www.ejeliot.com/samples/equal-height-columns/example-4.html of the page you linked where there is a negative bottom margin used for each of the columns and then a container with overflow hidden in order to hide the rough edges. I didn't apply the technique to the middle column since it appear that column will always be the longest but if you end up in a situation where the middle column isn't the longest and causes layout issues you can apply the same technique by including
margin-bottom: -2000px;
padding-bottom: 2000px;
in the style for it.
Just to sum up, what I did was add a container div that encompasses the three columns in your layout. I then added an overflow hidden for the container and the margin & padding shown above to the columns.
You won't score any nerd points with the standardistas, but tables will work.