#content_2 {position:
absolute;
top: 13%;
left: -10px;
width: 100%;
height: 100%;
z-index: 1;}
#content_image_2 {float: left;
top: 13%;
background-color: #ffffff;
background-repeat: no-repeat;
width: 70%;
max-width: 70%;
height: 30%;
max-height: 30%;
border-radius: 10px;
white-space: nowrap;}
#content_image_2 img{float: right;
min-height: 40%;
max-height: 40%;
width: auto;}
So i have these images inside a div. They are set to float right.
When i shrink the screen they wrap and readjust their position inside the div. Prefect! that is what i want, but when it gets too small the float images pop out of the div. I want to just not show up if the div is too small, but when i use overflow: hidden, the pages goes crazy and the floats don't work at all.
Does anyone know a way around this? or maybe another way to make this happen?
If you want to hide the images if the div is too small you can use a media query.
#media screen and (max-width: 320px) {
#content_image_2 img{
display: none;
}
}
Let's suppose your div has an id, let's say, it is my-div. Whenever it is small, you want to hide the images inside it:
#my-div.small img {
display: none;
}
Now, let's see how can we add/remove the small class:
function addClass(id, class) {
var element = document.getElementById(id);
if (!!element) {
//prevent duplication of class name
removeClass(id, class);
element.className += " " + class;
}
}
function removeClass(id, class) {
var element = document.getElementById(id);
if (!!element) {
document.getElementById(id).className = document.getElementById(id).className.replace(/\bMyClass\b/,'');
}
}
At the appropriate places check the width and height of the div and if it becomes small, add the small class, otherwise, remove it.
Well I just turned the table into another div, and all the sizing / overflow css works. I knew I shouldn't have used a table :/
Related
I'm trying to create a tile layout / grid box layout with dynamic sizing images. The Idea is to create this: http://i.imgur.com/ypmk6yR.jpg
But the size of the box needs to change depending on the width or height of the browser. Even better would be when the boxes also get less per row if the browser is too short in width. A full row of boxes/images should always be the full width of the page. And each image is square.
Someone created this
http://codepen.io/davidkpiano/pen/EaxjBj
With SASS, but I have no clue how to work with SASS but thought it could be achieved without SASS.
This is what I was playing around with but I never got It really working
.img_left {
float: left;
padding-bottom: 500px;
}
.img_left img {
width: 19.82vw;
height: 19.82vw;
}
.img_work img {
width: 19.82vw;
height: 19.82vw;
float: left;
}
.img_left is my div for the very first picture.
Is there a good solution to my problem?
The codepen script you posted is realy simple. Let me "decode" Sass for you, it might be what you looking for:
* {
box-sizing: border-box;
position: relative;
}
.tile {
float:left;
width: 25%;
padding: 25% 0 0 0;
height: 0;
overflow: hidden;
transition: 0.3s all ease-in-out;
}
.tile > img {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
// Make sure rows are flush
.tile:nth-child(4n + 1) {
clear: left;
}
// Small screens
#media (max-width: 768px) {
.tile {
width: 50%;
padding: 50% 0 0 0;
}
.tile:nth-child(2n + 1) {
clear: left;
}
}
Here is a good SASS to CSS converter for you to use in the future. At least until you become more familar with SASS.
http://sassmeister.com/
I have a header, it has two parts, left - the big breadcrumb, right - control buttons. Problem - when breadcrumb gets too long, right part drops down, but i want to hide breadcrumbs, not all, but the part that covers buttons. Below is image with short breadcrumb
Currently parent div is
width: auto;
text-align: left;
margin-left: 61px;
Breadcrumb is
display: inline-block;
text-align: left;
width: auto;
max-width: 60%;
overflow: hidden;
white-space: nowrap;
And the right button part is
z-index: 99999;
float: right;
display: inline-block;
I don't know why right part gets pulled down, i want just hide breadcrumb, cannot resolve it in chrome dev tool either.
This is what i want,
Maybe there is a little trick out there, noticed many variations of css display, any ideas?
Crappy demo: http://jsfiddle.net/a796joeq/
I suggest this for the "right button part":
z-index: 99999;
position: absolute;
right: 0px;
top: 0px;
display: inline-block;
Try to follow the proper concept so that you can deliver quality output.
You can use float concept to achieve this. For a better understanding, you can use widths initially.
For parent div use: 100%; For child divs use: 50% , 50% (total can be max of 100%)
Here is a fiddle (http://jsfiddle.net/kiranvarthi/ybt5tc8b/3/) of the below:
.parent { width: 100%; background: green; overflow: hidden; }
.child1 { width: 30%; float: left; color: #fff; }
.child2 { width: 30%; float: left; color: #fff; }
HTML
<div class="parent">
<div class="child">
Child 1 content comes here.
</div>
<div class="child">
Child 2 content comes here.
</div>
</div>
the problem is you margin-left on the parent div. Change it to a percentage
Give Positions for your div's :
Parant Div :
position:relative;
Breadcrumb :
position:absolute;
Add media queries:
#media screen and (max-width: 800px) {
.breadcrumb {
max-width: 50%;
}
}
#media screen and (max-width: 750px) {
.breadcrumb {
max-width: 40%;
}
}
I have two inline-block elements (first image). The first one has fixed width. The second one doesn't have fixed width because the container may grow horizontally so it should fill it.
When second element text is large (second image) then it wraps down.
But what I want is the element to grow vertically (third image).
I need also text to preserve line breaks.
You can apply max-width: calc( 100% - LABEL_WIDTH ) to your .element class. Replace LABEL_WIDTH with the width of the label. This way you can define a width in em for the label instead of using two percentual values.
See this JSFiddle for a working example: http://jsfiddle.net/QL78X/2/
See this link for a table of browsers supporting calc(): http://caniuse.com/calc
li {
display: inline-block;
vertical-align: top;
list-style-type: none;
}
.label {
width: 7em;
}
.element {
width: calc( 100% - 7em );
white-space: pre-line;
}
Here's a fiddle: http://jsfiddle.net/Pv8yH/1/
Basically, I've set a width on the label, then set a max-width on the element. I've set the white-space to 'nowrap' so that the second LI doesn't wrap down. Then I have to make sure that white-space is reset back to 'normal' within the LI itself. The max-width is just for show, really, the magic is the white-space property (at least in terms of your question).
ul { white-space: nowrap; }
ul li {
display: inline-block;
white-space: normal;
}
li.label { width: 30%; vertical-align: top; background: red; }
li.element { max-width: 70%; background: green; }
NB. If you are setting a width in ems for the first element, it may be tricky to get it to all fit. It will flow like you want, but you will definitely have to tweak it to make it look nice.
You can use
float:left;
Check this example here:
http://jsfiddle.net/3M5MF/
I suggest you use max-width on the right element. I did an example here: http://codepen.io/mattdrose/pen/qCLzG?editors=110
.field__item {
display: inline-block;
vertical-align: text-top;
}
.field__item--1 {
width: 30%;
}
.field__item--2 {
max-width: 70%;
}
I use percentages, but you can replace these with your preferred method.
However, I think you should use floats so you don't have to deal with the html white space when calculating your widths.
I used relative position of container with fixed height http://jsfiddle.net/6qMvy/
.container{
width: 400px;
height: 600px;
position: relative;
}
.left{
width: 100px;
position: absolute;
}
.right{
position: absolute;
left: 120px;
}
I want to make a perfectly centered/responsive div.
How would I go about that? Typically to move things I float them or use position: absolute;, but I would like to do so in relation to the browser window as opposed to just generally moving things around.
This will center the div horizontally:
#yourDiv {
margin: 0 auto;
}
You can use margin: auto; along with absolute positioning for responsive vertical/horizontal centering:
<section></section>
section {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: #f4d4c4;
height: 100px; /* The only caveat is there needs to be a height defined */
margin: auto;
width: 100px;
}
Example: http://jsfiddle.net/uLDVM/
Here s fiddle that centers it both horizontally and vertically
div {
width: 100px;
height: 100px;
border: 3px solid red;
margin: 50% auto;
}
This is what I use.
.centered {
display: block;
margin-left: auto;
margin-right: auto;
}
The best method using CSS would be to use margin and a max-width to control its width. Like this:
div {
max-width: 50px;
margin: 0 auto;
}
Now to change its value on the browser resize, either use media query or you can use %.
Media Query
#media only screen (max-width: 800px) {
// change the properties if the screen is no
// larger than 800px in width
}
Percentage
div {
max-width: 5%;
margin: 0 auto; // will only align it horizontally
}
You can use position: absolute and then use 0 for each four sides of it. To keep it centered and strecthed to the borders, while it won't strecth because of max-width.
This way, you will have the div centered and responding to the browser.
http://jsfiddle.net/Rncu6/
The green div has a max-width attribute, and it should shrink when the screen shrinks.
Instead, what happens is that the green div falls off to another line. If I try to remove the float:left on the green div, it suddenly overlaps with the yellow div, which is not what I want.
How do I fix this?
This seems like a really frustrating issue. The best way I can think to solve it is to remove float:left from p and replace it with display: table-cell.
p {
display: table-cell; /* replaces float:left */
max-width: 300px;
background-color: lightgreen;
height: 200px;
}
The only problem with this approach is that it will render all the margin attributes useless. To work around that, you can just add the inverse of those margin attributes to #img1. For example:
p { margin-left: 10px; }
Would be replaced with:
#img1 { margin-right: 10px; }
JS Fiddle Example
Caveat: I don't know how small you want your minimum width to become, but you'll notice that at a certain point the p will still move onto the next line. This is because it is becoming too small for individual words (e.g. longer words like "paragraph") to fit on one line. To work around that, you can use the word-break:break-all; attribute.
p { word-break: break-all }
That way, the width of p will continue to shrink until the width can no longer fit individual characters on one line.
JS Fiddle Example
Give width in percentages
#img1 {
background-color: yellow;
width: 20%;
height: 100px;
float: left;
}
p {
float:left;
margin-top: 0;
max-width: 50%;
background-color: lightgreen;
margin-left: 10px;
height: 200px;
}
http://jsfiddle.net/Rncu6/11/
The overlapping occurs because the size of the DOM is becomes larger than the browser so it gets pushed below the img div. As already mentioned you can use % to compensate for that. Although, if you want to absolutely define the divs in pixels until the browser can't display them any more.
To expand upon the current answer you could use Media queries...
#img1 {
background-color: yellow;
width: 100px;
height: 100px;
float: left;
}
p {
margin-top: 0;
float: left;
max-width: 300px;
background-color: lightgreen;
margin-left: 10px;
height: 200px;
}
p:after {
content: " ";
display: block;
height: 0;
clear: both;
}
#media screen and (max-width: 450px) {
#img1 {
width: 20%;
}
p {
max-width: 50%;
}
}
And here's the jsfiddle - http://jsfiddle.net/SxLCJ/