I have a series of three boxes, each approximately one-third of the screen width. The first two boxes have widths of 33.333% and are floated left. I've removed the float on the third box and set the width to auto so that it fills the remaining horizontal space. However, doing so causes the background image to disappear. I've created a Fiddle demonstrating this effect.
The HTML is very simple:
<div></div>
<div></div>
<div></div>
And here's the CSS:
div {
float: left;
width: 33.333%;
height: 120px;
background: #EEE url('http://upload.wikimedia.org/wikipedia/commons/thumb/a/ac/Approve_icon.svg/200px-Approve_icon.svg.png') no-repeat center center;
background-size: 100px 100px;
}
div:nth-child(2) {
border-left: 1px solid black;
border-right: 1px solid black;
}
div:nth-child(3) {
float: none;
width: auto;
}
Any ideas?
Use overflow: hidden to solve this issue:
div:nth-child(3) {
float: none;
width: auto;
overflow: hidden;
}
The reason you don't get it is, when you give width: auto, they surely lose their widths for a floated element.
Fiddle: http://jsfiddle.net/praveenscience/aMwk9/1/
You need to add overflow: hidden:
div:nth-child(3) {
float: none;
width: auto;
overflow: hidden;
}
Without this directive the 3rd DIV is not filling the remaining space but overlapping the rest of the DIV's as well.
Related
I want to display some divs containing an image and two divs with text in it in a flexbox container with a fixed height.
These divs represent tracks with an album cover, the song name and the artists name.
Like this:
<div class="flex-container">
<div class="track">
<img class="track--image" src="http://lorempixel.com/400/400/">
<div class="track--artist-name">Artist</div>
<div class="track--track-name">Song</div>
</div>
<div class="track">
.
.
.
</div>
The CSS:
.flex-container {
display: flex;
width: 100%;
height: 100px;
background-color: lightblue;
}
.track {
border: 1px solid black;
text-align: center;
max-width: 9rem;
color: black;
}
.track--image {
width: 100%;
border-radius: 50%;
}
.track--name,
.track--artist-name {
width: 100%;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
The problem is that the image has a width of 100% to fit into its parent div. But this also implies that it overflows its parent. And also the two divs within the track div get pushed outside its parents.
How do I prevent the image from beeing too big for its parent div so that either the image and the two divs fit inside the parent?
I also prepared a codepen to better describe the problem: https://codepen.io/anon/pen/YBQGRb
EDIT:
My expectation looks something like this:
As you can see the light grey container is my flex-container within I want to have my track divs. The image and those two texts should fit within even if the height of the flex-container changes.
If you edit your image class like this it works.
.track {
border: 1px solid black;
text-align: center;
width: 9rem;
color: black;
.track--image {
border-radius: 50%;
height:100%;
}
}
https://codepen.io/anon/pen/XOadGO
Does switching height to auto in your .flex-container give you the desired outcome,
.flex-container {
display: flex;
width: 100%;
height: auto;
background-color: lightblue;
}
After comment
All I've done below is add a small amount of padding to the track container to get the image off the top border and forced the image to fit within the fluid-container by control the width.
.track .track--image {
width: 35%;
height: auto;
border-radius: 50%;
}
.track {
border: 1px solid black;
padding: 5px;
text-align: center;
max-width: 9rem;
color: black;
}
I fixed my problem now like this:
.track--image {
height: 66%;
border-radius: 50%;
}
This works not for every height of the flex-container but is okay in my case.
Hi, i want to make this layout.
I am trying to do it in this way:
<div class="container" >
<div class="picture_cont">...</div>
<div class="info">...</div>
<div class="price">...</div>
</div>
And CSS
.container {
border: solid 1px #000;
min-height: 160px;
}
.container .picture_cont {
float: left;
border-right: dotted 1px #777777;
min-height: 160px;
width: 100px;
}
.container .price {
min-height: 160px;
min-width: 160px;
width: 150px;
float: right;
border-left: dotted 1px #777777;
}
.container .info {
float: left;
}
But i am getting this picture:
There is some issue with right column.
How to make it right ?
A mix of relative and absolute positioning will also do the trick. Something like this:
.container{position:relative;}
.picture_cont{position:absolute;left:0;top:0;bottom:0;width:100px;border-right:...}
.info{position:absolute;left:101px;top:0;bottom:0;right:151px;}
.price{position:absolute;right:0;top:0;bottom:0;left:150px;border-left:...}
Here's a fiddle to demonstrate.
you are missing overflow:auto;
.container {
border: solid 1px #000;
min-height: 160px;
}
.container .picture_cont {
float: left;
border-right: dotted 1px #777777;
min-height: 160px;
width: 100px;
}
.container .price {
min-height: 160px;
min-width: 160px;
width: 150px;
float: right;
border-left: dotted 1px #777777;
overflow:auto;
}
.container .info {
float: left;
}
You could try rearranging your markup to have both columns occur before the larger content area, remove the float on the larger area, and apply overflow:auto to it. This forces a new block formatting context restoring the flow of the .info container to be independent of the floated sidebars. (Note that you need to be careful of collapsing margins and non-staticly positioned elements to avoid scrollbars).
HTML
<div class="container" >
<div class="picture_cont">...</div>
<div class="price">...</div>
<div class="info">text text text text text text text text text text text text text text text text text text text text text text text </div>
</div>
CSS
...
.container .info {
overflow: auto;
}
Fiddle Demo
Source: http://jsfiddle.net/StMLm/
Demo: http://jsfiddle.net/StMLm/show
Because the items are floated and the middle has no specified width, the last item will "feel" the text of the second ("info") and be bumped down below it -- there is nothing telling info that, instead, it should stop 200px from the right edge. (150px? -- your picture and CSS don't match up)
One way to achieve that is to put right-padding of 200px (150px?) on info and then move the right-column into place with some CSS trickery: see In Search of the Holy Grail for this classic solution.
A newer approach is to use display:table on the container display:table-cell on the 3 inner parts, set the width's on the left- and right-columns, and be done with it.
You're using floats, so all your containers are independant, which means you can't base position and size on other containers. So in your case you'll have to specify a width for your containers so that they are fixed and don't overlap each other.
Also try and put a "top" of 0px on your price container. This should help out.
I typically use "inline-blocks" and fluid widths. This nice thing about this method is you can add a "min-width: 240px" and your UI will stack on mobile devices. (jsFiddle)
div.container {
width: 100%;
}
div.container div {
border: 1px solid blue;
overflow: auto;
height: 10em;
display: inline-block;
margin: -3px;
padding:0;
}
div.info {
width: 70%;
}
div.picture_cont,
div.price {
width: 15%;
}
I am attempting to float 3 divs within a container div. I thought it would be simple but I'm having difficulty keeping them evenly spread apart. As I want the website to be somewhat responsive, so I can't have the spacing specified in px.
CSS:
#circlecontain{background-color:green;height:200px; width:1200px; margin:auto;}
.circle{width:200px;height:200px;border-radius:100px;
font-family:Arial, Helvetica, sans-serif;font-size:20px;color:#fff;
line-height:150px;text-align:center;background: rgba(0,0,0,0.8);
margin:auto; display:inline-block; vertical-align:middle;
}
Thanks in advance
Hold them inside 3 div elements with a width of 33% each, and use margin: auto; on round divs, this way they will be equal.
Demo
<div class="wrap_me">
<div></div>
</div>
<div class="wrap_me">
<div></div>
</div>
<div class="wrap_me">
<div></div>
</div>
CSS
.wrap_me {
width: 33%;
border: 1px solid #f00;
float: left;
}
.wrap_me div {
width: 150px;
height: 150px;
border-radius: 100px;
border: 1px solid #ddd;
margin: auto;
}
You can also hold this inside a single container with a min-width property so that your elements don't wrap incase of insufficient width
What Mr.Alien said isn't wrong, but
I'm having difficulty keeping them evenly spread apart
If you have three divs you want to distribute even along the full width of the container, you can float the left-most div to the left, the right-most div to the right and the middle div will get float:none and margin: auto, like so:
.container {
width: 300px;
height: 100px;
}
.container div {
width: 25%;
height: 100%;
background: blue;
border-radius: 100%;
}
.inner-left {
float: left;
}
.inner-middle {
float: none;
margin: auto;
}
.inner-right{
float: right;
position: relative;
bottom: 100%;
}
See the jsfiddle.
EDIT:
updated fiddle - didn't save...
I have the following HTML code:
<div class="main">
<div class="container">
<div class="contents">
Some funny stuff in here
</div>
</div>
</div>
With the following CSS:
.main {
overflow: auto;
width: 200px;
}
.container {
border: 1px solid black;
}
.contents {
width: 300px;
}
This is what this page does (see it at http://jsfiddle.net/C7RDh/7/):
main div is 200px width, with overflow: auto (i.e. scrolls contents if wider than 200px).
So, as contents div is 300px wide, it scrolls horizontally.
So, I would expect container div to be 300px as well (as elements inside it are 300px wide), but it is not! It's 200px wide.
How come? I want it to be as wide as its contents (300px), how can I achieve that?
You just need to make you container float
.container {
border: 1px solid black;
float: left;
}
Float will automatically adjust your outer div to inner div width.
You need to slightly adjust your CSS. This will work:
.main {
overflow: auto;
width: 200px;
float: left;
}
.container {
border: 1px solid black;
float: left;
}
.contents {
width: 300px;
float: left;
}
Actually you should add the overflow: auto in container css not main css
I have two DIVs inside one DIV. One of the DIVs is floated left, and so, the other div is to fill outer window.
If I enlarge or shrink the outer DIV I want inside DIVs to fill outer DIV in any case.
The sample code:
<div id="main_container">
<div id="left_container"></div>
<div id="right_container"></div>
</div>
and CSS rules are
#main_container {
border: 1px ridge blue;
overflow: hidden;
height: 93%;
}
#left_container{
margin: 10px;
height: 100px;
border: 1px solid red;
float: left;
overflow: hidden;
min-width: 200px;
}
#right_container{
margin: 10px;
height: 100px;
border: 1px solid magenta;
min-width: 200px;
overflow: hidden;
}
Here is the jsfiddle code.
Reize the html window, you will see red one is not filling it when the other is on the bottom.
Edit: To clarify, I added images
#media screen and (max-width: 441px) {
#left_container{
float: none;
}
}
441px just an example (two blocks min-width + side margins + border - 1).
Add
width: 98%;
(Adjust as necessary)
To #left_container and #right_container
Give min-width to the main div.
#main_container {
border: 1px ridge blue;
overflow: hidden;
height: 93%;
min-width: 400px;
}