I am currently facing a problem in placing an image out of div. I want the image to be floated extreme right of screen irrespective of div screen size.
I built a DEMO for the problem that i am facing.
CSS:
.outer{
background:cyan;
position:relative;
width:700px;
height:475px;
}
.inner{
width:370px;
color:#fff;
position:absolute;
background:red;
top:35px;
}
Image shall look like as below as per solution
it may help you try this
.inner
{
width:100%;
color:#fff;
position:absolute;
background:red;
top:35px;
}
demo
another demo without inline style
.inner .col-sm-6:nth-child(1)
{
padding-top:10px;
width:20%;
float:left;
}
.anotherdiv
{
width:80%;
float:left;
padding:0;
}
.anotherdiv img{
widh:100%;
}
ijust make these changes in this
see demo here
You can see this DEMO
Snippet:
<div class="inner row">
<div class="col-xs-4 col-md-4 col-sm-4" style="">
<p>Some helper Text goes here and there</p>
</div>
<div class="col-xs-8 col-md-8 col-sm-8" style="">
<img src="http://placehold.it/500x400" style="width:100%;">
</div>
</div>
Related
If we inspect the code,you will see that the div.header has height: 0px;
Look at image below:
I want my div to be the size of three elements .c1,.c2 and.c3`
How can I solve this problem?
I hope as well that we managed to explain my problem.
HTML:
<div class="container">
<div class="header">
<div class="c1">asdsadsadsadasda</div>
<div class="c2">asdasdas</div>
<div class="c3">sadsada</div>
</div>
</div>
CSS:
.container
{
width:100%;
height:500px;
background:red;
}
.c1
{
width:auto;
height:auto;
background:yellow;
}
.c2
{
width:auto;
height:auto;
background:gray;
}
.c3
{
width:auto;
height:auto;
background:orange;
}
.c1,.c2,.c3{width:33%;float:left;}
.header{width:70%;height:auto;margin:0 auto;background:blue;}
JSFiddle
Add overflow: auto(for example) css property to your .header class to recognize it's children's height.
JSFiddle
Use clearing divs.
HTML:
<div class="container">
<div class="header">
<div class="c1">asdsadsadsadasda</div>
<div class="c2">asdasdas</div>
<div class="c3">sadsada</div>
<div class='clearing'></div>
</div>
</div>
CSS:
.clearing {clear:both;}
I have a two column layout with one fixed column and one column of variable size with a min-width and a max-width. The columns should be flush with each other so there is no space.
An image of what I'm looking for http://imgur.com/RQXXaoz
Here's what I tried
JsFiddle: http://jsfiddle.net/49krdtf6/4/
.superOuter
{
background-color:#C0C0F0;
padding:20px;
text-align:center;
}
.outer
{
display:inline-block;
padding:20px;
background-color:#F0C0C0;
}
.test
{
overflow:hidden;
min-width:100px;
max-width:400px;
background-color:#F0F0F0;
padding:20px;
}
.test2
{
float:right;
width:200px;
padding:20px;
background-color:#F0F0C0;
}
<div class="superOuter">
When there's not enough content:<br>
<div class="outer">
<div class="test2">
Fixed content
</div>
<div class="test">
Rest with BFC
</div>
</div>
</div>
<br><br>
<div class="superOuter">
I want it to look like this (that is unless the page shrinks)<br>
<div class="outer">
<div class="test2">
Fixed Content
</div>
<div class="test">
Larger text here and it makes the whole thing go to the big size which is what I want without all the text
</div>
</div>
</div>
The problem I'm having is that my variable width column will not grow to it's max-width and is stuck at the width determined by its content.
You can use display table and table-cell to achieve this. Another difference is to discard max-width and go for just width instead.
* {
box-sizing:border-box;
}
.superOuter {
width:100%;
padding:20px;
text-align:center;
background-color:#C0C0F0;
}
.outer {
display:table;
width:100%;
padding:20px;
background-color:#F0C0C0;
}
.fixed {
display:table-cell;
width:400px;
padding:20px;
background-color:#F0F0F0;
}
.fluid {
display:table-cell;
padding:20px;
background-color:#F0F0C0;
}
<div class="superOuter">
When there's not enough content:
<br />
<div class="outer">
<div class="fixed">Fixed content</div>
<div class="fluid">Rest with BFC</div>
</div>
</div>
jsFiddle demo
UPDATE
After discussing in the comments, I believe you actually have a limit for both columns width, one being 400px and the other, 800px.
Something like this:
* {
box-sizing:border-box;
}
.superOuter {
width:100%;
text-align:center;
padding:20px;
background-color:#C0C0F0;
}
.outer {
display:table;
width:100%;
padding:20px;
background-color:#F0C0C0;
}
.fixed {
display:table-cell;
width:400px;
padding:20px;
background-color:#F0F0F0;
}
.fluid {
display:table-cell;
width:800px;
padding:20px;
background-color:#F0F0C0;
}
<div class="superOuter">
When there's not enough content:
<br />
<div class="outer">
<div class="fixed">Fixed content</div>
<div class="fluid">Rest with BFC</div>
</div>
</div>
jsFiddle demo
Is this what you are looking for?
https://jsfiddle.net/retr0ron/
What I've done here is rearranged your content in the HTML-document (notice that there can't be whitespace between the divs where I removed it, otherwise you will see a small gap between them (because of how inline-elements behave).
HTML:
<div class="superOuter">
When there's not enough content:<br>
<div class="outer">
<div class="test">
Rest with BFC
</div><div class="test2">
Fixed content
</div>
</div>
</div>
<br><br>
<div class="superOuter">
I want it to look like this (that is unless the page shrinks)<br>
<div class="outer">
<div class="test">
Larger text here and it makes the whole thing go to the big size which is what I want without all the text
</div><div class="test2">
Fixed Content
</div>
</div>
</div>
CSS:
.outer
{
max-width:600px;
min-width: 380px;
padding:20px;
background-color:#F0C0C0;
margin:0 auto;
}
.test
{
overflow:hidden;
min-width:100px;
background-color:#F0F0F0;
padding:20px;
}
.test2
{
float:right;
width:200px;
padding:20px;
background-color:#F0F0C0;
}
how do i make divs display at the bottom of the screen inline (following each other horizontally like facebook chat) and also overlapping their parent div. i have tried the following but does not work.
<div id="container">
<div id="box">
</div>
<div id="box">
</div>
<div id="box">
</div>
</div>
#container{
height:10px;
position:fixed;
bottom:0;
width:1000px;
margin:0 auto;
}
#box{
border:1px solid blue;
width:250px;
height:300px;
display:inline-table;
position:fixed;
bottom:0;
}
Wrap the elements in another container div, which is positioned absolutely.
Firstly, you can't use duplicate id's. Use classes instead.
Your HTML will be something like:
<div id="container">
<div class="box-container">
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>
</div>
You can't use display:inline-table and fixed together. Use position:absolute or position:fixed (if you want to make the items stick) for the container div, and for instance display:inline-block for the .box elements to get them inline.
#container {
height:10px;
position:fixed;
bottom:0;
width:1000px;
margin:0 auto;
}
.box-container {
position:absolute;
bottom:0;
height:40px;
width:100%;
}
.box{
border:1px solid blue;
width:250px;
height:40px;
display:inline-block;
}
See http://jsfiddle.net/B228U/1/ for an example.
Cheers,
Jeroen
You can´t give same id to different elements. Use class. Also give main div position:relative and float:left to rhe class box. Like this:
<div id="container">
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>
#container{
height:10px;
position:absolute;
bottom:0;
width:1000px;
margin:0 auto;
}
.box{
border:1px solid blue;
width:250px;
height:300px;
float:left;
display:inline-table;
position:relative;
bottom:0;
}
http://jsfiddle.net/7kwLc/
I use the following to display an image on the left side and any related info on the right side of the image. In some cases where description, address and other info exceed the height of the image, the text goes below the image. My question is how should I keep the text for not going under the image, but to continue like a column?
.eventphoto
{
padding:1px;
width:200px;
float:left;
margin-right:15px;
border-radius:2px;
}
.desc
{
font-size:0.8em;
line-height:13pt;
}
<div class="desc">
<img class="eventphoto" src="">
<div style="float:left;">
<p>DESCRIPTION</p>
.
.
.
</div>
</div>
This is a fairly-standard construct: the media object
In your case, if we add Nicole's styles like so:
<style>
.eventphoto
{
padding:1px;
width:200px;
margin-right:15px;
border-radius:2px;
}
.desc
{
font-size:0.8em;
line-height:13pt;
}
.media {margin:10px;}
.media, .bd {overflow:hidden; _overflow:visible; zoom:1;}
.media .img {float:left; margin-right: 10px;}
.media .img img{display:block;}
.media .imgExt{float:right; margin-left: 10px;}
</style>
(leaving the formatting to your original classes), and add a wrapper around the image with the appropriate styles:
<div class="desc media">
<div class="img">
<img class="eventphoto" src="http://placekitten.com/100/100">
</div>
<div class="bd">
<p>DESCRIPTION</p>
<p> ... </p>
</div>
</div>
All works well. See this CodePen for an example: http://codepen.io/paulroub/pen/JDsKa
Try float:left on the image and float:right on the text like:
.eventphoto
{
padding:1px;
width:200px;
float:left;
margin-right:15px;
border-radius:2px;
}
.desc
{
font-size:0.8em;
line-height:13pt;
float:right;
}
I think overflow: hidden; is your best bet. Here's a demo of it in use:
http://jsbin.com/owesiw/1/edit
I have a problem with 3 divs next to each other. The one on the left is constant and its width doesn't change. The center one needs to contract and expand according to the div on the right, as it is also expanding because it is a cart. I have the website available for you, so you can see the problem.
This is what I want:
[div=constant width]
[div=expanding/contracting]
[div=expanding/contracting]
Details:
Site: http://ssdbutikken.dk/
User: test
Pass: qwertytest
You can use display:table for this. Write like this:
HTML
<div class="parent">
<div class="left">left</div>
<div class="middle">middle</div>
<div class="right">right</div>
</div>
CSS
.parent{
width:100%;
display:table;
}
.left,.middle,.right{
display:table-cell;
background:red;
}
.left{
width:100px;
}
.middle{
background:yellow;
}
.right{
background:blue;
}
Check this http://jsfiddle.net/jAquQ/
It's work till IE8 & above.
.constant
{
float:left;
width:200px;
margin-left:auto;
margin-right:auto;
}
.constant_2
{
float:right;
width:700px;
margin-left:auto;
margin-right:auto;
}
<div>
<div class="constant "></div>
<div align="center"></div>
<div class="constant_2 "></div>
</div>
float:left will do the work : try this
<div style="float:left;background-color:red;width:200px">left</div>
<div style="float:left;background-color:green">middle</div>
<div style="float:left;background-color:blue">right</div>