I have two elements aligned horizontal.
I want the right one to have a dynamic width and the left one to take up as much space as is left. How Do I do that?
Se JSFiddle
or code
<div class="wrapper">
<div style="background:red;" class="one">hello</div>
<div style="background:blue" class="two">dude</div>
</div>
.wrapper > div {
border: 1px yellow solid;
display: table-cell;
height:80px;
}
.one {
width: 100%;
}
.two {
width: 100px;
}
.wrapper {
width:100%;
height:200px;
border:2px solid blue;
}
.right {
height:200px;
width:60%;
background:red;
float:right;
}
.left {
width:auto;
height:200px;
background:green;
}
}
<div class="wrapper">
<div class="right">hello</div>
<div class="left">dude</div>
</div>
You can align two element like div horizontal to each other having right element can be dynamic and left element set his width automatically. To take width automatically you can use width:auto; property for first div. And second div having some width in percent or pixel so first div can take remaining width and set it right using float right property. I have created it with example.
If you change width of right element then width of left element will take remaining width automatically.
you can also take reference
Help with div - make div fit the remaining width
try this..
<div class="wrapper">
<div style="background:red;" class="one">hello</div>
<div style="background:blue" class="two">dude</div>
</div>
.wrapper > div {
border: 1px yellow solid;
display: table-cell;
height:80px;
}
.one {
width: 100%;
}
.two {
width: auto;
}
Related
My goal is to put div with width=100vw, after that div there should be second div with width for example 300px (so that second div should be out of screen). I tried many things with float, display inline and so on, now I don't have any more ideas.
<div id="div1"></div>
<div id="div2"></div>
Here is fiddle with example code
https://jsfiddle.net/kg5ea4sc/5/
You can use white-space: nowrap on parent element and display: inline-block on two inner elements. Also maybe you want to add vertical-align: top so it will look like this Fiddle
.element {
white-space: nowrap;
}
#div1{
background: green;
display: inline-block;
width:100vw;
height: 80px;
}
#div2{
background: red;
display: inline-block;
width:300px;
height: 100px;
}
<div class="element">
<div id="div1"></div>
<div id="div2"></div>
</div>
https://jsfiddle.net/guanzo/kg5ea4sc/18/
The second div is outside of the screen. You'll have to manipulate either it's position or the overflow:hidden property on the container if you want to see it though.
HTML
<div id="container">
<div id="div1"></div>
<div id="div2"></div>
</div>
CSS
#div1{
background: green;
width:100vw;
height: 80px;
}
#div2{
background: red;
width:300px;
height: 100px;
}
div{
display:inline-block;
}
#container{
width:100vw;
white-space:nowrap;
overflow:hidden;
}
Here is my fork of your fiddle: https://jsfiddle.net/nyzvbvo7/1/
You can scoll to the right to see the second div
What I changed:
I added
body {
width: calc(100vw + 300px);
margin: 0;
}
#div1, #div2 {
display: inline-block;
vertical-align: top;
}
So I made the body wide enough to hold both containers and set the container's display to inline-block. vertical-align: top; can be left out, the the containers will be algned at their baseline (which can vary depending on the content)
I'm trying to fill remaning area of screen with the second div, div 1 and 2 got fixed width. How could i achive this effect?
HTML
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
Problem can be fixed by using this CSS code, when second div is set to auto it will fill remaning area left to be filled.
#div1 {
float:left;
width:400px;
height:200px;
background-color: gray;
}
#div2 {
float:right;
width:400px;
height:200px;
background-color: green;
}
#div3 {
margin-left: 400px;
margin-right: 400px;
width:auto;
height:200px;
background-color: silver;
}
Edit
Classically, this would look like this:
CSS:
#div1 {
float:left;
width:400px;
height:200px;
background-color: gray;
}
#div2 {
margin-left: 400px;
margin-right: 400px;
width:auto;
height:200px;
background-color: silver;
}
#div3 {
float:right;
width:400px;
height:200px;
background-color: green;
}
HTML:
<div id="div1"></div>
<div id="div3"></div>
<div id="div2"></div>
DEMO: http://jsfiddle.net/NicoO/5AJkn/
P.S: expand your screen > 800px to prevent the layout from breaking. Could also be solved by adding a min-width to a new parent element.
If your browser support calc, you coudl try:
#div2 { float:left; width:calc(100% - 800px); height:200px; }
Add the margins too, if any.
<style>
.box{display: table;width: 100%;}
#div1{width:400px; height:200px;background: #000;display: table-cell}
#div2{width:auto; height:200px;background: #e6e6e6;display: table-cell}
#div3{width:400px; height:200px;background: #000;display: table-cell}
</style>
<div class="box">
<div id="div1"></div>
<div id="div2">ds</div>
<div id="div3"></div>
</div>
It is the same questions that :
Positioning two divs, one with fixed width(left div) and other in percentage(right div)
Two divs side by side, one with google map and second with fixed width
This Codepen fix your problem
Apply position: relative for their parent (if it is not positioned already) and
apply the following to div2:
#div2{
position:absolute;
left:400px; /* width of div1 */
right:400px; /* width of div3 */
height:200px;
}
JSFiddle
You can use css3 calc() function if older browser support is not an issue.
#div2{
display:inline-block;
width: calc(100% - 800px); /*100% - width of div1 and div3 */
height:200px;
}
JSFiddle
This is the layout i want,
I made some with code, but i'm not sure how to do after this.
[html]
<div id="content">
<div id="left">left</div>
<div id="right">right</div>
<div id="bottom">bottom</div>
</div>
[css]
#content{
/* the width in here will be changed
width: this requirment will be changed
i dont' want to type my left, right content static
is there a way? */
}
#left{
float:left;
width: 50px;
}
#right{
float:left;
width: 50px;
}
#bottom{
/*what do i have to do in here?
float:*/
}
You could do something like this:
Set clear:both on #bottom. Add width:50% to both #left/#right.
Finally, specify the borders on the elements and add box-sizing in order to include the borders in the element's width calculations.
jsFiddle example
#content {
border:1px solid black;
}
#content > div {
height:100px;
box-sizing:border-box;
-moz-box-sizing:border-box;
}
#left {
float:left;
width: 50%;
border-right:1px solid black;
}
#right {
float:right;
width: 50%;
}
#bottom {
border-top:1px solid black;
clear: both;
}
This is what you want for the bottom div:
#bottom{
clear: both;
}
For #bottom, you want float:left;width:100px; Just try that, see if it works.
You could also try using positions to do it, if you don't need the size of them to change:which it looks like you don't. For example:
#Left {width:50px;height:50px;position:absolute;left:0px;top:0px;}
#Right {width:50px;height:50px;position:absolute;left:50px;top:0px;}
#Bottom {width:100px;position:absolute;left:0px;top:50px;}
I feel much more confident the second will work.
Here is how I would do it personally: http://jsfiddle.net/T5fW3/
<div id="content">
<div id="top">
<div id="left">
<div class="container"> Left </div>
</div>
<div id="right">
<div class="container"> Right </div>
</div>
</div>
<div id="bottom">
Bottom
</div>
</div>
I use a container so that if you want to add styles (border, margins, padding etc) they don't mess up the 50%. You can now resize content to whatever size and your proportions will still be the same.
#content{
/* the width in here will be changed
width: this requirment will be changed
i dont' want to type my left, right content static
is there a way? */
}
#left{
float:left;
width: 50%;
}
#right{
float:left;
width: 50%;
}
#bottom{
border: 1px solid black;
clear: both;
}
.container {
border: 1px solid black;
}
the border in the container class and bottom id is there just for illustration. If you were to add the border to #left or #right your layout will break. Notice also, I use 50% instead of 50px.
I'm trying to create a fluid container comprised of 3 elements. The two on the left and right are a fixed width and are fine. The element in the middle resizes to fill any extra space but seems to run behind the outer elements.
Here is where I'm at so far: (concept taken from here)
HTML
<div class="left"> </div>
<div class="right"> </div>
<div class="middle">
<div class="progress">
This box shouldn't overlap the outer two
</div>
</div>
CSS
.left {
border: 2px solid green;
height:40px;
width:200px;
float: left;
}
.right {
border: 2px solid green;
width:100px;
height:40px;
float: right;
}
.middle {
border: 2px solid red;
width:auto;
height:40px;
}
.progress {
background:yellow;
margin:0px auto;
}
Here is a fiddle to illustrate the problem You'll notice that the yellow box is the full width of the page and not constrained to the center box.
The middle box will end up being a fluid media player progress bar and needs to display at any size (within reason). How can I place more elements inside the middle container and make them have a maximum width of the parent. I don't want to have to rely on JavaScript for this unless I have to, in which case I can write a solution, I was just wondering if there was a CSS solution?
Try adding:
.middle {
padding-left: 200px;
padding-right: 100px;
}
Check it here: http://jsfiddle.net/f6U9p/1/
This will allow the space of the sidebars to be excluded from the width of the middle element.
One way is to use display: table and display:table-cell
HTML:
<div class="container">
<div class="left"> </div>
<div class="middle">
<div class="progress">
This box shouldn't overlap the outer two
</div>
</div>
<div class="right"> </div>
</div>
CSS:
.container {
border: 1px solid #ccc;
display: table;
}
.left,.right {
display: table-cell;
}
.left {
border: 2px solid green;
height:40px;
width:200px;
}
.right {
border: 2px solid green;
width:100px;
height:40px;
}
.middle {
border: 2px solid red;
height:40px;
}
.progress {
background:yellow;
margin:0px auto;
}
Fiddle: http://jsfiddle.net/f6U9p/2/
Add float: left to .middle.
The outer divs are floated, so the yellow box is going behind them.
I want 2 divs aside and they have to stay aside. If the screen is too small I don't want the two divs under each other. The first DIV has a fixed width of 400px, the second DIV can be between 150px and infinite. The height is both fixed at 300px.
How can I do that? I already tried with float, but that causes the DIVs to break if the screen is too small.
Making a wrapper-div around with a large width would work, but looks ugly and buggy.
I'd do something like the below;
HTML
<div id="containerdiv">
<div id="fixeddiv"> </div>
<div id="elasticdiv">
<div id="div2000"> </div>
</div>
</div>
CSS
#containerdiv{
min-width:550px;
}
#fixeddiv{
height:300px;
width:400px;
background:red;
float:left;
}
#elasticdiv{
height:300px;
overflow:hidden;
min-width:150px;
background:blue;
}
#div2000{
width:2000px;
background:yellow;
float:left;
}
How Divs will appear
Create a wrapper div and give it display: table-row; min-width: 550px;, and then make the divs inside it have display: table-cell;. Something like this:
.container
{
display: table-row;
min-width: 550px;
}
.container > div
{
display: table-cell;
height: 300px
}
.container > div:first-child
{
width: 400px;
}
.container > div:last-child
{
min-width: 150px;
}
And then this for the HTML:
<div class="container>
<div>I have 400px width.</div>
<div>I have at least 150px width, and am next to the other guy.</div>
</div>
Here, have a Fiddle