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>
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;
}
I am trying to do what showed in the following example: http://jsfiddle.net/A8zLY/5/
but the order of the divs shuold be opposite, I need the left div first (I need the div with the role width:auto; to be first):
<div class="left"></div>
<div class="right"></div>
One way to achieve the same layout with the order of divs changed in the markup is to use absolute positioning :
.container {
width:600px;
height:200px;
border:1px solid;
position:relative;
}
.left {
margin-left:200px;
height:200px;
background:red;
}
.right {
height:200px;
width:200px;
background:blue;
position:absolute;
top:0; left:0;
}
<div class="container">
<div class="left"></div>
<div class="right"></div>
</div>
change .right class float:left to float:right
code:
.right{float:right;}
Long challenge I have had, and I just need to ask for help now.
I have a container for divs:
<div id="container">
<div id="1">Bla</div>
<div id="2">Bla</div>
<div id="3">Bla</div>
<div id="4">Bla</div>
<div id="5">Bla</div>
</div>
Now, div 1 and 2 should be fixed and floating on the left. Width 50%. All the other divs, should be on the right and just continue to float on the right no matter how long and how many divs I add. Width is also 50%.
Im thinking of something like this:
|--1--|--3--|
|--2--|--4--|
|-----|--5--|
|-----|--6--|
|-----|-----|
Any tips? I am just confused on relative and absolute and what is supposed to float where...
I should add, div 1 and 2 should be "scroll" fixed. So position: fixed. Its a bit how the facebook newsfeed is strcutured.
Any help is greatly appreciated. :)
I think i solved your problems. You can use this code for your problem it may be help me.You can add many div in second column but you should use this width:50%; background:pink; float:left; margin-left:50%; css code. You can change background according to you.
Live Working Demo
HTML Code:
<div id="container">
<div id="one">1</div>
<div id="two">2</div>
<div id="three">3</div>
<div id="four">4</div>
<div id="five">5</div>
<div id="six">6</div>
<div id="seven">7</div>
</div>
CSS Code:
#container
{
width:100%;
height:100%;
}
#one
{
width:50%;
background:red;
}
#two
{
width:50%;
background:green;
float:left;vertical-align:top;
}
#three
{
width:50%;
background:blue;
float:left;
margin-top:-20px;
}
#four
{
width:50%;
background:gray;
float:left;
margin-left:50%;
margin-top:-20px;
}
#five
{
width:50%;
background:violet;
float:left;
margin-left:50%;
}
#six
{
width:50%;
background:gold;
float:left;
margin-left:50%;
}
#seven
{
width:50%;
background:pink;
float:left;
margin-left:50%;
}
Result:
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/