I am trying to build an image list, where images can have different sizes, as well as the container.
The images work according to my wishes, but the last element, the input wrapper, doesn't.
I would like to have the last item (the input file wrapper) to use the full height of the container, and be shaped as a square.
I tried multiple styles but I am unable to stop the following problems:
When there is a lot of space left in the container, the last item becomes too wide
When the container is full, the last item become too narrow
.container {
resize: both;
width:1000px;
height:200px;
border:1px solid #000;
display:flex;
overflow-x:auto;
overflow-y:hidden;
white-space: nowrap;
align-items:flex-start;
padding:0.25rem 0;
}
.container>* {
border:1px solid #000;
max-width:200px;
max-height:100%;
width: auto;
height: auto;
}
.container>*:not(:first-child) {
margin-left:1rem;
}
.inputfilewrapper {
display: inline-block;
flex:1 0 0px;
height:100%;
}
.inputfile {
display: none;
}
.inputfile + label {
display: block;
height: 100%;
}
<div class="container">
<img src="https://picsum.photos/200/300">
<img src="https://picsum.photos/300/200">
<img src="https://picsum.photos/1000/1000">
<img src="https://picsum.photos/200/300">
<img src="https://picsum.photos/200/300">
<div class="inputfilewrapper">
<input type="file" id="random123" class="inputfile">
<label for="random123">[+]</label>
</div>
</div>
The desired result is shown in red in the following picture above the actual version:
Related
I want that yellow box to fill all the available space both vertically and horizontally without overlaying the picture.
(I'm trying to do it without using table properties)
Any ideas?
This is how it looks now:
and this is what i want:
.content-block-body{
width: 100%;
background-color: brown;
overflow:auto;
}
.content-block-text{
float:left;
background-color: red;
padding:2%;
}
.content-block-image{
background-color: greenyellow;
float: right;
}
<div class="content-block-body">
<div class="content-block-text">
<div>月額固定と成果報酬が選べます</div>
<div>成果報酬額に上限おもうけられます</div>
<div>料金が明瞭で予算に合わせた対策が可能</div>
</div>
<div class="content-block-image"> <img src="image-1.jpg"> </div>
</div>
The problem is the float: left makes the yellow area not "stretch." To make the image float to the right of the text, it has to come before the text. So we change the order of the content blocks:
<div class="content-block-body">
<div class="content-block-image"> <img src="image-1.jpg"> </div>
<div class="content-block-text">
<div>月額固定と成果報酬が選べます</div>
<div>成果報酬額に上限おもうけられます</div>
<div>料金が明瞭で予算に合わせた対策が可能</div>
</div>
</div>
And then adjust the css:
.content-block-body {
width: 100%;
background-color: brown;
overflow:auto;
}
.content-block-text{
/*float:left;*/ /* this we remove */
background-color: red;
padding:2%;
/* this we add: */
overflow: auto;
}
.content-block-image{
background-color: greenyellow;
float: right;
}
Note that whenever you float things you'll most likely need to add what's called a "clearfix". In this case, apply the clearfix to the .content-block-body to make it extend vertically to fit the floated element http://nicolasgallagher.com/micro-clearfix-hack/
You have to specify width of left block and right block in CSS and make image width 100%
.content-block-body{
width: 100%;
background-color: brown;
overflow:auto;
}
.content-block-text{
float:left;
background-color: yellow;
padding:2%;
width:56%;
}
.content-block-image{
background-color: greenyellow;
float: right;
min-width:200px;
width:40%;
}
.content-block-image img{
width:100%;
}
<div class="content-block-body">
<div class="content-block-text">
<div>月額固定と成果報酬が選べます</div>
<div>成果報酬額に上限おもうけられます</div>
<div>料金が明瞭で予算に合わせた対策が可能</div>
</div>
<div class="content-block-image"> <img src="image-1.jpg"> </div>
</div>
You can use css3 flex. That's the only thing that works just fine when it comes to getting the height of the parent node for child node. All the hacks for old browsers doesn't work always.
.content-block-body{
width: 100%;
background-color: brown;
overflow:auto;
display: flex;
clear: both;
}
.content-block-text{
float:left;
background-color: red;
align-items: stretch;
}
.content-block-image{
flex: 1;
background-color: greenyellow;
}
.content-block-image img{
float: right;
}
<div class="content-block-body">
<div class="content-block-text">
<div>月額固定と成果報酬が選べます</div>
<div>成果報酬額に上限おもうけられます</div>
<div>料金が明瞭で予算に合わせた対策が可能</div>
</div>
<div class="content-block-image">
<img src="//placehold.it/250x250">
</div>
</div>
also check out this cool site for code snippets on centering in css.
In order to position two images beside each other (i.e. the two images are on the same line), I tried the following code:
<html>
<head>
<style>
#container {
width:100%;
}
img {
display:inline-block;
width:50%;
}
</style>
</head>
<body>
<h1 style="text-align:center"><strong>Test</strong></h1>
<div id="container">
<img src="Google-logo.png">
<img src="Google-logo.png">
</div>
</body>
The width of the container div should be shared equally by the two images, right? However, this does not happen and the images appear on two separate lines.
If, however, I use float:left instead, the images do appear on the same line. Why is this?
Remove the new line between the img tags:
<div>
<img src="..." alt=""><img src="..." alt="">
</div>
This happens because elements which are declared with inline or inline-block are sensitive to whitespace.
More information: on David Walsh's Blog
Commonly layouts are done with floats or flexbox instead.
Floats
/* Clearfix */
.wrapper:after {
content: '';
display: table;
clear: both;
}
.item {
float: left;
width: 50%;
height: 100px;
}
.item-1 {
background: red;
}
.item-2 {
background: blue;
}
<div class="wrapper">
<div class="item item-1"></div>
<div class="item item-2"></div>
</div>
Flexbox
.wrapper {
display: flex;
}
.item {
flex: 1; /* Or use width: 50%; */
height: 100px;
}
.item-1 {
background: red;
}
.item-2 {
background: blue;
}
<div class="wrapper">
<div class="item item-1"></div>
<div class="item item-2"></div>
</div>
try this code
#container {
max-width:100%;
display:flex;
}
img {
flex:1;
}
Give align property to images.
<img src="Google-logo.png" align="left">
<img src="Google-logo.png" align="left">
https://jsfiddle.net/bt2341yh/
use css float property:
img {
width:50%;
float:left;
}
see fiddle . no need of display.
Images give margins and padding so giving 50% width wont bring them in a line. Try reducing their widths or add float:left.
img{
display: inline-block;
width: 50%;
float: left;
}
According to the above solution it is very difficult to keep the page next to next line content. It will looks like minified version of our code. So try to add font-size:0 on your parent element #container. This will resolve this issue.
#container {
width:100%;
font-size:0;
}
DEMO
<html>
<head>
<title>My Play Store</title>
<style type="text/css">
body{
margin:0;
}
#container{
min-width:1080px;
}
#upperbar{
background-color:#F1F1F1;
height:60px;
width:100%;
}
#logobardiv{
margin:10px 20px 10px 30px;
float:LEFT;
}
#logo{
height:39px;
width:183px;
}
#searchbardiv{
float:left;
padding:15px 0px 15px 10px;
}
#searchbar{
height:28px;
width:545px;
font-size:1em;
}
</style>
</head>
<body>
<div class="container">
<div id="upperbar">
<div id="logobardiv">
<img id="logo" src="images/logo.png"/>
</div>
<div id="searchbardiv">
<input id="searchbar" type="text" placeholder="Search"/>
</div>
</div>
</div>
</body>
In the above page that I am trying to make,the "searchbardiv" tends to move below "logobardiv" when I reduce the size of the browser window.
I just want want the two divs to be in the same line.I tried using "float:left",but it is not giving the required result.
Instead of using floats, try using display: inline-block for the two child elements and white-space: nowrap to keep them both on the same line.
Apply display: inline-block to both #logobardiv and #searchbardiv and apply vertical-align: middle (or other value as needed) to #logobardiv to take care of any vertical alignment issues.
Finally, apply white-space: nowrap to the #upperbar to keep the two child elements on the same line.
Note that for smaller enough screens, you could get horizontal scrolling. To fix this, you need to make a design decision to handle the situation. You could make the search input width smaller or the logo smaller or both, perhaps by using % widths instead to make them responsive. You have a few options available to solve the problem.
body {
margin: 0;
}
#container {
min-width: 1080px;
}
#upperbar {
background-color: #F1F1F1;
height: 60px;
width: 100%;
white-space: nowrap;
}
#logobardiv {
margin: 10px 20px 10px 30px;
display: inline-block;
vertical-align: middle;
}
#logo {
height: 39px;
width: 183px;
}
#searchbardiv {
display: inline-block;
padding: 15px 0px 15px 10px;
}
#searchbar {
height: 28px;
width: 545px;
font-size: 1em;
}
<div class="container">
<div id="upperbar">
<div id="logobardiv">
<img id="logo" src="http://placehold.it/183/39" />
</div>
<div id="searchbardiv">
<input id="searchbar" type="text" placeholder="Search" />
</div>
</div>
</div>
You Give your search bar width 545px try to reduce this when on small screen use media query:
e.g
#media(max-width:768px) {
#searchbar{
width:200px;
}
Hope this helps
search bar size is too long enough so it is displayed in next line.Set the logo size and search bar width in %.
width:70%;
Fiddle
solution 1: use % instead of pixel for width if you want divs to be flexible e.g:
#searchbar{
height:28px;
width:80%;
font-size:1em;
}
solution 2: if you don't want the divs to be resized with screen, set them as table cell:
#upperbar{
/* your current styles here */
display:table;
}
#logobardiv{
/* your current styles here */
display:table-cell
}
#searchbardiv{
/* your current styles here */
display:table-cell
}
I want to build a container that contains an image on the left side and to its right there is supposed to some information about it, like a headline and some description.
I want the container to be able to expand between some minimum and maximum width dynamically. The images can also have different widths between two boundaries and if the container already has a maximum width, but the headline is longer, the headline should be shortened and there should appear some dots.
I found a way to shorten the headline, like here: http://jsfiddle.net/h0452569/
, but therefore I need to limit the width of the container next to the image. I tried this with the code below, but I can't find a way with CSS to dynamically limit the div width to not extend the container's div!
I would be very happy if anyone had an idea out there!
jsfiddle
HTML:
<div class="container">
<div class="image"><img src="https://farm6.staticflickr.com/5238/14184095861_d3787020c7_t.jpg" width="100" height="71" alt="alt_flickr-7"></div>
<div class="meta-container">
<div class="headline">Some very very very long headline</div>
<div class="description">Some description</div>
<div class="description">Other stuff</div>
</div>
<div style="clear:both"></div>
CSS:
.container {
min-width: 200px;
max-width: 250px;
max-height: 100px;
position: absolute;
border: 1px solid #666666;
white-space:nowrap;
}
.image {
float: left;
display: inline-block;
vertical-align: top;
}
.image img {
max-width: 100px;
max-height: 80px;
vertical-align: top;
}
.meta-container {
overflow: hidden;
text-overflow:ellipsis;
display: inline-block;
}
.headline {
width: 100%;
white-space:nowrap;
}
.description {
font-size:.8em;
}
In the example you refer to, those styles are added to the text element itself. In your design, the styles are given to the parent element.
Solution: add the styles to .headline instead of .meta-container.
.container {
min-width: 200px;
max-width: 250px;
max-height: 100px;
border: 1px solid #666666;
overflow: hidden;
}
.image {
float: left;
}
.image img {
max-width: 100px;
max-height: 80px;
vertical-align: top;
}
.headline {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.description {
font-size: .8em;
}
<div class="container">
<div class="image"><img src="https://farm6.staticflickr.com/5238/14184095861_d3787020c7_t.jpg" width="100" height="71" alt="alt_flickr-7"></div>
<div class="meta-container">
<div class="headline">Some very very very long headline</div>
<div class="description">Some description</div>
<div class="description">Other stuff</div>
</div>
</div>
<p>Next element</p>
In order to break the word use "word-wrap: break-word" in your .headline class, you also need to set a width (in px). For example:
.headline{
width:100px;
word-wrap: break-word;
}
I have trouble with textarea inside a div whose display style is table-cell. You can see the problem here. The last div has a textarea and somehow it causes an empty area below itself and above other divs.
BTW I am trying to have a structure like this. According to selection, cells will be displayed in a fixed height area with equal widths having a total 100%. Problem occurs when there is a textarea inside any div. If there is an existing component that behaves like this any recommendation will be appreciated.
HTML
<div class="panes">
<div id="pane1" class="pane">
<div class="pane-content"></div>
</div>
<div id="pane2" class="pane">
<div class="pane-content"></div>
</div>
<div id="pane3" class="pane">
<div class="pane-content">
<textarea></textarea>
</div>
</div>
</div>
CSS
.panes {
display: table;
table-layout: fixed;
width:100%;
height:100px;
}
.pane {
display: table-cell;
border: solid 1px;
}
.pane-content {
display: block;
overflow: auto;
height: 100px;
border: solid 1px red;
}
.pane-content textarea {
display: block; /*This fix the issue in IE but other browsers still broken*/
width: 100%;
height: 100px;
}
make it like this:
.pane {
display: table-cell;
border: solid 1px;
vertical-align: top;
}