I have two divs in the same line, div_left, div_right
I'd like div_right have the fixed width 200px, and left_div extend to the max width and height of the left page, how could I write this with css?
html:
<div class="right"></div>
<div class="left"></div>
css:
.right { background: red; height:300px; float:right; width:200px; }
.left { background: green; height:300px; padding-right: 200px; }
code: http://jsfiddle.net/47YMn/1/
may be you can use display:table property like this http://jsfiddle.net/sandeep/NCkL4/8/
Related
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;
}
What's missing to make this fluid-fixed layout work?
HTML:
<div class="header">
<div class="title">Title</div>
<div class="options">Opt</div>
</div>
CSS:
.header{margin:0;padding:0;}
.title{margin-right:50px;}
.options{float:right;width:50px;position:relative;top:0;left:auto;}
DEMO: http://jsfiddle.net/7Sdq6/
The link below works but I can't figure out what is missing for the above example to work.
http://jsfiddle.net/andresilich/6vPqA/13/show/
EDIT: I can position .options absolutely but I have a dropdown within that and I do not want the dropdown's position to be positioned relatively to .options
Demo
just add
display:inline-block;
Instead of margin-right: 50px use width: calc(100% - 50px)
Demo
css
.header {
width:400px;
}
.title {
width: calc(100% - 50px); /* takes the width of the parent and we substract the width of the right floated div from it instead of using margin-right */
background: red;
display: inline-block;
}
.options {
float:right;
width:50px;
background: blue;
}
As I understand you need to achieve a fixed title with fluid options, so you need to use this CSS
CSS
.title {
margin:0 50px 0 0;
float:left;
width: 400px /*your width*/
}
.options {overflow:hidden}
I figured it out..
The fixed content needs to be before the fluid content in the HTML:
<div class="header">
<div class="options">Opt</div>
<div class="title">Title</div>
</div>
http://jsfiddle.net/7Sdq6/5/
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
I am trying to make a series of DIV elements sit side by side. Howeever i am running into problems
HTML:
<div id="comic" class="comic">
<div class="comic_panel">1</div>
<div class="comic_panel">2</div>
<div class="comic_panel">3</div>
<div class="comic_panel">4</div>
<div class="comic_panel">5</div>
<div class="comic_panel">6</div>
<div class="comic_panel">7</div>
<div class="comic_panel">8</div>
<div class="comic_panel">9</div>
<div class="comic_panel">10</div>
<div class="comic_panel">11</div>
<div class="comic_panel">12</div>
<div class="comic_panel">13</div>
<div class="comic_panel">14</div>
</div>
CSS:
#comic{
height: 563px;
width: 1000px;
background: black;
margin: auto;
color:white;
position:relative;
overflow:auto;
}
.comic_panel{
width:1000px;
height:563px;
position:relative;
float:left;
background:orange;
}
However the result I get is simply the DIVS displaying under neath one another.
Your divs are too wide to fit side by side in the container. Try giving them a width of 200px:
.comic_panel{
width:200px;
height:563px;
position:relative;
float:left;
background:orange;
}
If you want for a scroll bar to appear, use white-space:nowrap; on the container and display:inline-block on the children.
Here is a demonstration: http://jsfiddle.net/h2StP/show
Change the CSS to below,
.comic_panel{
width:6%;
height:563px;
position:relative;
float:left;
background:orange;
border:1px solid red;
}
and they should fall side by side.
Basically child divs have same width as parent , so there is no room for them to sit side by side.
DEMO
The reason is that each inner divs (.comic_panel) are using all the width of the parent container (#comic). Then, the next div can only be place right below the previous one.
If you tune up the widths, you can have your result.
For example, if you let the container div have any width, you would have all the inner divs side by side: http://jsfiddle.net/
body {
width: auto;
overflow: auto;
width: 10000px;
}
#comic{
height: 563px;
background: black;
margin: auto;
color:white;
overflow: visible;
}
.comic_panel{
border: 1px solid black;
width:100px;
height:63px;
float:left;
background:orange;
}
To make the inner divs not wrap, you need to either set the width of the body element to a proper value (to make space for all the inner divs) via a hard-coded width css property (as in the fiddle, but not the best approach) or via javascript (a better approach).
This post explains other approaches, using tables: http://css-tricks.com/how-to-create-a-horizontally-scrolling-site/.
BTW, you may not need the position: relative that you put there to achieve this effect.
Put the whole thing into a container div like this:
<div id="container">
<div id="comic" class="comic">
<div class="comic_panel">1</div>
<div class="comic_panel">2</div>
<div class="comic_panel">3</div>
<div class="comic_panel">4</div>
<div class="comic_panel">5</div>
<div class="comic_panel">6</div>
<div class="comic_panel">7</div>
<div class="comic_panel">8</div>
<div class="comic_panel">9</div>
<div class="comic_panel">10</div>
<div class="comic_panel">11</div>
<div class="comic_panel">12</div>
<div class="comic_panel">13</div>
<div class="comic_panel">14</div>
</div>
</div>
The container div should be the same size as your 'comic' div was before:
#container {
height: 563px;
width: 1000px;
overflow: auto;
}
And the width of your 'comic' div should be 14000.
#comic{
height: 563px;
width: 14000px;
background: black;
margin: auto;
color:white;
position:relative;
overflow:auto;
}
I have 4 divs that are set to float left but the end div keeps wrapping two a new line on a smaller screen which is really annoying me...i want them to scale with the screen size so they always stay on the same line regardless of screen size... and im trying not to use a table (which is very tempting giving they v.reliable for this!!!)
I'm wondering how to fix this annoying issue so they always stay in position regardless of screen size??
I have this as my CSS:
.wrapper{
margin:0 auto;
width: 80%;
display: table-cell;
}
.gridf{
float:left;
margin-right:3px;
width:200px;
min-height:200px;
border:1px solid white;
}
.grid{
float:left;
margin-left: 3px;
margin-right:3px;
width:200px;
min-height:200px;
border:1px solid white;
}
.gridl{
float:left;
margin-left: 3px;
width:200px;
min-height:200px;
border:1px solid white;
}
My HTML:
<div style="overflow: hidden;">
<div class="wrapper">
<div class="gridf"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="gridl"></div>
</div>
</div>
Please help :D
Your wrapper is a percentage width container with 4 fixed-width child elements floated.
The width of the wrapper is dependent on the width of the viewport. If the viewport is narrowed to the point that the wrapper's width is less than that of the 4 child element widths together, then naturally they won't all fit and therefore will wrap.
The fix is to make sure your wrapper doesn't get smaller than the combination of the children.
So, add up with widths, borders and margins of the child elements and then give the wrapper a min-width attribute equal to that.
Hi i think you should this check to this demo
.wrapper {
margin: 0 auto;
width: 80%;
border: solid 1px red;
overflow: hidden;
}
.gridf,
.grid,
.gridl {
Background: green;
width: 24%;
min-height: 100px;
float: left;
margin: 2px 0;
}
.gridf {} .grid {
margin: 2px 1%;
}
.gridl {
background: yellow;
}
<div class="wrapper">
<div class="gridf">One</div>
<div class="grid">Two</div>
<div class="grid">Three</div>
<div class="gridl">Four</div>
</div>
Although this is an old post, I think that the problem, which I also run into, is the fact that you want all these cells to be of a fixed size, and not %, right? The solution you chose changed initial format where you specified width:200px;
Well, I would suggest to look here: http://jsfiddle.net/gn2bg/
The ONLY one thing I did is to add inner wrapper around your cells:
.inwrapper{
float:left;
overflow: hidden;
min-width: 830px;
}
and new html as this:
<div class="wrapper">
<div class="inwrapper">
<div class="gridf"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="gridl"></div>
</div>
</div>
Notice that your wrapper requires 80% of space.
The inwrapper, however, tells that its size is fixed - 830px (total of all internal div sizes plus room for padding.)
This way inwrapper uses 'elbows' to stretch the width, and override these 80% of 'wrapper'
I understand that you already made decision as to what is your best solution. I am leaving this response to anyone else in the future who needs exact answer to your exact question.
You can try removing the table-cell display rule from the wrapper and setting percentages (or min-widths) on the child divs like this jsFiddle example.
That should do the trick :
<div class="wrapper">
<div style="width:850px">
<div class="gridf"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="gridl"></div>
</div>
</div>
And that will be supported on any browser.
http://jsfiddle.net/5GrKU/3/
HTML
<div style="overflow: hidden;">
<div class="wrapper">
<div class="gridf"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="gridl"></div>
</div>
</div>
CSS
.wrapper{
margin:0 auto;
width: 80%;
display: inline;
}
.gridf{
float:left;
margin-right:3px;
width:20%;
min-height:200px;
border:1px solid red;
}
.grid{
float:left;
margin-left: 3px;
margin-right:3px;
width:20%;
min-height:200px;
border:1px solid red;
}
.gridl{
float:left;
margin-left: 3px;
width:20%;
min-height:200px;
border:1px solid red;
}
for you reference i have also added the URL of the demo. http://jsfiddle.net/sg8FE/
UPDATE
just change display:inline in wrapper class to display:block rest all is right and the div's are centered.
by giving a fixed width in your inner divs you are forcing them to have that width no matter what is the size of the view port. And giving the outer div a width of 80% you are shrinking its size with the width of your view port. You need to do either giving fixed width to all those divs or giving a relative width to all.