How can I make a div that overflows past it's parent to break the overflowing part into a new line?
What I have at the moment:
https://jsfiddle.net/9f9b4pz0/
<html>
<div class="first">
<div class="second"></div>
</div>
</html>
css:
.first {
width: 500px;
height: 500px;
background-color: red;
}
.second {
width: 700px;
height: 200px;
background-color: blue;
}
I don't know are you meaning to overflow that by using position: absolute?
https://jsfiddle.net/moongod101/5u7q6a1h/1/
By not defining fixed widths and heights, but instead no width (which corresponds to width: auto) and just a max-height instead of height.
The usual situation wouldn't be plain colored squares but text, small imagaes etc. which do break into new lines automatically:
https://jsfiddle.net/vxhmu6xj/1/
(You can't break a block which has fixed width - even if you want that, you'd have to use several blocks next to each other which look like one block but can be stacked if there isn't enough width.)
Related
I cannot figure this out. I would like 3 images to sit side by side inside a 930px wide div.
so, when you enter into responsive design mode, or drag the screen browser width wise to make it smaller all the 3 images stay side by side inside the div without wrapping to the next line.
But automatically start to re-size to fit the re-sized div.
The 3 images only start to resize correctly inside the div only when the 3rd image has wrapped under the second image. So it looks like this below.
[]
[]
[]
Once all the images are vertically aligned the images then start to shrink down correctly. But this image wrapping under the next image is no good for me, as when viewing the website on a mobile phone, or when re-sizing the screen the images are still super large.
Must be a way to stop these images from wrapping underneath each other, and just stay inline but automatically re-size themselves
as the div/page width shrinks down?
I've tried white-space: nowrap; display: inline; inline-block; even display: table-cell; nothing seems
to do what I need it to do. However, if I use only one image instead of 2, or 3 then it works perfectly fine.
You're probably thinking why not just put all 3 images inside 1 image in photoshop? Well each img is an href link, so that's not possible.
Even floating the images all to the left still doesn't help.
Here's my CSS/HTML
img {
max-width: 100%;
height: auto;
}
then
<div style="width: 930px; max-width: 100%; border: 1px solid blue;">
<img src="camera.png"> <img src="lights.png"> <img src="action.png">
</div>
Can someone tell me where I may be going wrong please? How can I stop images wrapping underneath other images when the parent container shrinks down.
I've had to resort to using multiple #media queries of different pre-fixed image sizes per break-point. But there's got to be a much much easier way. Something so simple that I'm missing.
I figure I might share a flexbox solution as well. I've included the code below so it should be relatively self explanatory. Feel free to leave a comment below if you think I should clarify anything.
.container{
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: flex-start;
}
img {
flex: 1;
max-width: 100%;
height: auto;
max-height: 310px;
}
<div class="container" style="width: 930px; max-width: 100%; border: 1px solid blue;">
<img src="https://cdn.vox-cdn.com/uploads/chorus_image/image/44336734/fujifilmx100t-1.0.0.jpg">
<img src="https://d3k7s9wfq6lao0.cloudfront.net/latest/37504/main/7.jpg">
<img src="https://upload.wikimedia.org/wikipedia/commons/3/33/Clapperboard%2C_O2_film%2C_September_2008.jpg">
</div>
you can use inline-block for this. you will need to alter the width with media queries as your screen gets smaller
img {
display:inline-block;
width: 33%;
height: auto;
}
you should also wrap the images in a div.container and give this div a width:100%
Image width set to 100% occupy all the horizontal space of the container, since you want to fit three images inline to each other, divide the 100% by 3 so that when the container is resized the three images will occupy one third of the available space. The margin-left: -2px is to make sure that the image border don't touch the edge, otherwise it will wrap to new line. Try this sample:
CSS:
img {
display: inline-block;
width: 33%;
height: auto;
margin-left: -2px;
box-sizing: border-box;
}
HTML element:
<div style="width: 930px; max-width: 100%; border: 1px solid blue;">
<img src="camera.png">
<img src="lights.png">
<img src="action.png">
</div>
My answers' more or less a follow up to Tom's which I'm writing on here so I don't overflow the comments section.
The problem with max-width: 100% is that the relative sizing doesn't start to kick in until each image outgrows its parent, in this case, the div. Since all images have a default absolute size based on their image src they force themselves onto a new line before resizing and so only then will max-width start doing what you want it to. As per Tom's response, the percentage sizing of 33% forces the images to have a relative size which causes them to shrink immediately.
Naturally 'img' tags are given the display of inline which means you could opt to just use the following code:
img {
width: 33.3%;
}
Now here's the biggest gotcha I had when dealing with inline images.
A display of inline and inline-block is respective of the whitespace
that exists within your HTML markup.
Therefore the small presence of whitespace below whilst not evident is enough to cause images to still move over to a new line.
img {
width: 33.3%;
}
<div style="width: 930px; max-width: 100%; border: 1px solid blue;">
<img src="https://picsum.photos/250/250/?random1">
<img src="https://picsum.photos/250/250/?random2">
<img src="https://picsum.photos/250/250/?random3">
</div>
But once this whitespace is removed the images all fit perfectly across the screen whilst resizing.
img {
width: 33.3%;
}
<div style="width: 930px; max-width: 100%; border: 1px solid blue;"><img src="https://picsum.photos/250/250/?random1"><img src="https://picsum.photos/250/250/?random2"><img src="https://picsum.photos/250/250/?random3"></div>
Now compressing the HTML markup above makes it rather unwieldy and so as an alternative, you could opt to use the floating method. By setting a float of left for each image you'll force each 'img' tag to sit flush, regardless of the extra spacing between them. Just be sure to give the parent div a float of left as well or an overflow of auto to stop it from collapsing.
img {
width: 33.3%;
float: left;
}
After many days testing various ways out here's the perfect way to do this without flex. Make sure each image is wrapped in its own div that's important.
<style>
* {
box-sizing: border-box;
}
img {
width: 100%;
max-width: 100%;
height: auto;
}
.column {
float: left;
width: 33.33%;
padding: 5px;
}
/* Clearfix (clear floats) */
.row::after {
content: "";
clear: both;
display: table;
}
</style>
Now, here's where I've changed it up a little bit for more flexibility. Since each image is now in its own div we can then make the image width: 100%; or max-width: 100%; then add the width: 33.33%; part that used to be under img {} to each of the new 3 div columns instead.
<div class="row">
<div class="column"> /* 33.33% width */
<img src="flash-tooltip.png">
</div>
<div class="column"> /* 33.33% width */
<img src="html-tooltip.png">
</div>
<div class="column"> /* 33.33% width */
<img src="portables-tooltip.png">
</div>
</div>
Lot's of people provided great advice.
The easiest way is using flex. But, something people don't tell you when using flexbox. You should still wrap each of the images inside their own div container. Otherwise, you will get some weird things happening when you encase them in hyperlink anchors, that is if all three images are just placed inside the first flex container div. And without their own div container images won't keep any kind aspect ratio when they shrink/enlarge. They just squash and skew together.
And finally very important! Always make sure any images inside a flex container is set up the same way. Either width: 100%; or max-width: 100%; otherwise, the images will not shrink up/down at all in Google Chrome.
I've included this same method as above, only this time in a flexbox version.
My goal is to get a sidebar layout which should scale based on the browser window width. Some parts should have a scaled width, others should have a static width and some should scale but with a min/max-width. (It also would be great if some would expand based on the content within)
The html:
<div id="table">
<div id="row">
<div id="sidebar">at least 90px width<br/>not more than 130px width</div>
<div id="content">scale</div>
<div id="logo">should be static 60px</div>
<div id="sidebar2">at least 90px width</div>
</div>
</div>
and the css:
#table {
display: inline-table;
width: 100%;
}
#row {
display: table-row;
}
#table #row div {
display: table-cell;
}
#sidebar {
width: 10%;
min-width: 90px;
max-width: 130px;
}
#content {
width: 70%;
}
#logo {
min-width: 60px;
background-color: #FAB6B8;
}
#sidebar2 {
min-width: 90px;
width: 20%;
}
The issues:
It appears that max-width has no effect on dom-elements with display:table-cell assigned. (I guess)
I tried to work with another div, spans around the actual cell div.
This causes the problem, that the cell scales perfectly, but the left side of the content div will not stick to the first sidebar. (Same problem, if I put the "max-width div" inside the cell)
Working with a float: left layout doesn’t work either. (Float breaks if window gets too small; don’t scale, if I use a div to protect it)
Is there a way to work around this without using js?
Put in a div in #row with no further CSS will work for a div, which expand based on content. Sadly if there is just text in it breaks after every word. How can I prevent this and be able to set a max width and hide the overflow?
I found the Answer by myself:
The key is to apply absolute width to the elements, which should get a max width.
It's not perfect, because the divs with an absolute width don’t scale, until the one with a relative width reach their min-widths but I guess it’s the only way.
So simple.
Sorry for the trouble...
So I've seen this post: Can I scale a div's height proportionally to its width using CSS? and it sort of answers my Question. I can get divs to sclae porpotionally as I need. However, what I also need is to set a minimum height for those divs.
In this fiddle http://jsfiddle.net/FBZuB/1/ I have set up what I am trying to accomplish. The BLUE div is a general wrapper that then defines the height of the RED div based on the width of the BLUE div. However when I try to change the min-height on the RED div, the divs that I want to scale AND have a min-height, unexpected results occur.
I would think once I scale DOWN to the min-height point, the div would stop scaling and only change in width. However, it seems like setting the min-height just sets some sort of base point for the whole calculation and everything scales continually. I hope this makes sense.
The RED divs should scale up and down, but at a certain point, when the RED div hits its minimum height, it should stop scaling in height and only in width. I have accomplished this before with pure javascript, but since I read the post above, I am trying to get a CSS only solution.
Here is the code. You can ignore the content for now... I am focuses mainly on the red blocks. Proportionally scale width/height, until it hits the min-height and then it should stop scaling the height and only the width.
HTML
<div style="background: blue; width: 70%;">
<div id="left">
<div class="content"></div>
</div>
<div id="right">
</div>
</div>
CSS
div {
margin: 5%;
float: left;
background: red;
position: relative;
}
#left {
width: 50%;
padding-bottom: 60%;
min-height: 100px;
}
#right {
width: 30%;
padding-bottom: 60%;
min-height: 100px;
}
.content {
position: absolute;
width: 90%;
margin: 5%;
background: green;
top: 0;
left: 0;
height: 90%;
}
Unfortunately plain CSS is unable to calculate any expressions in all browsers except IE, and as such you will have to use at least some JavaScript to dynamically calculate the width.
I would probably do something like this in your html file.
Since you didn't specify how you are resizing your div, I'll assume that it's just when the window resizes.
<body onresize="
var left = document.getElementById('left');
if (left.clientHeight < left.style.min-height) {
left.style.cheight = left.style.min-height;
}
">
</body>
I'm trying to get a simple solution for this layout.
This is the simplified html.
<div class='wrapper'>
<div class='header'></div>
<div class='middle'> TEXT </div>
<div class='footer'></div>
</div>
Header and footer have a fixed height in pixels.
middle can have a variable height, depending on the content.
I want wrapper to have a minimum height of 100%. So if the text inside middle is small, the middle div should expand to fill the browser page. And if it's too long, the whole page should be scrollable.
Is this possible easily? Maybe changing something in the layout?
here's your solution: http://jsfiddle.net/S4akv/1/
You do NOT want to set a hard height for the .middle. If your content is only a few lines then you will end up with scrollbars where none are needed.
With a header and footer, you also don't want height: 100% on your .middle class because it will push your footer down, forcing a scrollbar no matter what. You also don't want a clear-cut height:100% because most browsers will interpret this as 100% of the browser height, so when you resize your browser to be larger, either the height won't change or the footer won't move.
The best solution here is to have your wrapper and any associating backgrounds attached to that. Depending on the content within your .middle div this answer could change, but given the simple parameters this is the most elegant way to do it.
the secret is to make sure that all containing elements have a height set. reason being, any block element with height: 100% will only be 100% of the area containing it. in this case you need to set height for middle, wrapper and body, html
body,html { height: 100%; margin:0; padding:0; }
.wrapper { min-height: 100%; width: 100%; background-color: red; position:relative; padding-bottom: 200px; }
.header { height: 200px; width: 100%; background-color: blue; }
.middle { }
.footer { height: 200px; width: 100%; background-color: green; position:absolute; bottom: 0; }
If you have nested content within .middle that also needs to be 100% height there is a better way, using a combination of height, absolute positioning and negative margins. There are a million ways to skin a cat. Well, a handful at least :)
edited to add padding to .wrapper to make room for footer. The bottom padding of wrapper must be the same height as the footer
I have next html:
<div class="left">
<div style="margin: 32px 0;">
<div class="border"></div>
</div>
</div>
and css:
.left {
position:absolute;
background: red;
height: 50%;
width: 32px;
}
.border {
background: green;
height: 100%;
}
but I don't see green box :(
UPD: I want to see red squares over and under green box.
UPD2: height of green box should be red.height - 32px*2
Your problem is that you have 3 empty div's here and not one of them has a set height. So even if you do min-height: 100% its not going to work unless some outer container has a height that your not showing. You will need to put some content in there or give one of the 3 div's (assuming they are the only containers on the page) an actual height. Like .left{ height: #px; } (# = the height you want it to have). Otherwise the browser does not know how to render percentages because it has nothing to relate them too.
Div's are block level elements which means they will assume the size of content put in them but if there is no content in them they will assume a height of 0px by 0px.
http://jsfiddle.net/X6qkL/5/ updated
The second div is not assigned a height, so the innermost div cannot be assigned a relative height. Try adding the following CSS rule:
.left div {
height: 100%;
}
Or, assign explicit heights to the inner divs.
http://jsfiddle.net/B9z92/1/
Use min-height: 100%; in .border{...}. and add a class
.middle {
height: 100%;
} and assign it to the parent div of .border{...} div.