I want to make 3 divs in one line. Left, middle, right.
Left and middle must have fixed size (300 px for example) and middle have to resize dynamically (in percents). Here is my css:
#content
{
width: 100%;
height: 435px;
}
#content_left
{
float: left;
width: 300px;
height: 345px;
border: 1px solid red;
}
#content_middle
{
margin-left: 300px;
margin-right: 300px;
width: 100%;
height: 345px;
border: 1px solid green;
}
#content_right
{
float: right;
width: 300px;
height: 345px;
border: 1px solid red;
}
#wrap
{
maring: 0 auto;
clear: both;
width: 100%;
margin-left: auto;
margin-right: auto;
min-width: 1020px;
}
And here is my html:
<div id="wrap">
<div id="content">
<div id="content_right"></div>
<div id="content_left"><div>
<div id="content_middle">
</div>
</div>
</div>
alt text http://img509.imageshack.us/img509/8940/capturewj.png
How can I make my green div to fill all size between other 2 divs?
Your HTML has an error. The left div is not closed. It should be:
<div id="content_left"></div>
Related
On some webpages I have created a main div called middlewrapper and these contains two divs inside left and middle. The left div is only used on certain pages and will only use up the required spacing while the middle wrapper use up the remaining spacing of the middlewrapper. While on other pages when left is not being used, middle is being used and it is using up 100% of middlewrapper
A working example is provided
#middlewrapper { width: 1100px; margin: 0 auto; padding: 0; border: 0px solid #bbbbbb; background: #ffffff; overflow: hidden; }
#left { float: left; width: 19%; margin: 0 6% 0 0; vertical-align: top; background: green; height: 100px; }
#middle { width: auto; padding: 0; background: #ffffff; min-height: 100px; overflow: hidden; background: red; height: 100px; }
<div id="middlewrapper">
<div id="left">
Test Left
</div>
<div id="middle">
Test Middle
</div>
</div>
However now I want to create a div called middle and right and want to naturally push the div to the right. However, I'm not having any luck since no matter what I do I always seem to have the div in 2 separate lines.
A working example is provide
#middlewrapper { width: 1100px; margin: 0 auto; padding: 0; border: 0px solid #bbbbbb; background: #ffffff; overflow: hidden; }
#middle { width: auto; padding: 0; background: #ffffff; min-height: 100px; overflow: hidden; background: red; height: 100px; }
#right { float: right; width: 19%; margin: 0 0 6%; vertical-align: top; background: blue; height: 100px; }
<div id="middlewrapper">
<div id="middle">
Test Middle
</div>
<div id="right">
Test Right
</div>
</div>
#middlewrapper {
width: 1100px;
margin: 0 auto;
padding: 0;
border: 0px solid #bbbbbb;
background: #ffffff;
overflow: hidden;
display: flex; // to make the children align
}
#middle {
flex: 1; // stretch to the available width
width: auto;
padding: 0;
background: #ffffff;
min-height: 100px;
overflow: hidden;
background: red;
height: 100px;
}
#right {
width: 19%;
background: blue;
height: 100px;
}
<div id="middlewrapper">
<div id="middle">Test Middle</div>
<div id="right">Test Right</div>
</div>
Here's how you do it with flexbox. You need to put flex grow in red container to be able to get the spare space.
Something like this?
#middlewrapper {
width: 100%;
background-color: red;
}
#right {
float: right;
background-color: blue;
}
<div id="middlewrapper">
<div id="right">
Test Right
</div>
<div id="middle">
Test Middle
</div>
</div>
Goal: In the content area of a site, I need to make a decorative-only column that spans the height of two divs (containing images) beside it.
Problem: the column either has no height, regardless which attributes I give it, or only has the height of the first sibling div and no fill. I have tried height: 100%, min-height: 100%. Also tried making parent position: absolute and setting top: 0 and bottom: 0.
the code:
.row {
position: relative;
overflow: hidden;
border: #000 3px dashed;
}
#colLeft {
float: left;
width: 15%;
height: 100%;
background-color: red;
}
#B1 {
float: left;
width: 84%;
height: 100px; /* this will actually be the height of the img */
background-color: green;
}
#B2 {
width: 84%;
height: 100px; /* this will actually be the height of the img */
float: left;
background-color: #ff0;
}
<div class="row">
<div id="colLeft"></div>
<div id="B1">
<img src="foo">
</div>
<div id="B2">
<img src="bar">
</div>
</div>
Thanks in advance for your help.
what I want: http://i.stack.imgur.com/sgr5g.png
What I get: http://i.stack.imgur.com/lS63m.png
You should change the left column to position: absolute.
.row {
position: relative;
overflow: hidden;
border: #000 3px dashed;
}
#colLeft {
float: left;
width: 20%;
position: absolute;
height: 100%;
background-color: red;
}
#B1 {
float: right;
width: 80%;
height: 100px;
background-color: green;
}
#B2 {
width: 80%;
height: 100px;
float: right;
background-color: #ff0;
}
<div class="row">
<div id="colLeft"></div>
<div id="B1">
<img src="foo">
</div>
<div id="B2">
<img src="bar">
</div>
</div>
In your code you have height: 100px; /* this will actually be the height of the img */ for both img in your .row
You can do it like this also, fiddle http://jsfiddle.net/DIRTY_SMITH/QwZuf/260/
in this example I set the height of 200px to the row and height of 100% to the column
.row {
position: relative;
overflow: hidden;
border: #000 3px dashed;
height: 200px;
}
#colLeft {
float: left;
width: 15%;
height: 100%;
background-color: red;
}
Here's an alternate solution I found that works very well, too.
.row {
display: table-row;
}
#colLeft {
display: table-cell;
width: 15%;
background-color: red;
}
#B1 {
display: table-cell;
width: 84%;
height: auto;
background-color: green;
}
#B2 {
display: table-cell;
width: 84%;
height: auto;
background-color: #ff0;
}
Hi i has created this simple design:
body{
background: url("../imgs/bg_pattern.gif") scroll 0 0% repeat, url("../imgs/1.jpg") no-repeat scroll 0 0% / 100% 100%;
margin: auto;
}
#panel{
height: 100%;
width: 300px;
background-color: #232325;
float: right;
}
#audio{
width: 100%;
height: 11%;
background-color: red;
}
#term{
width: 100%;
height: 11%;
background-color: blue;
}
#content{
width: 100%;
height: 67%;
background-color: green;
}
#footer{
width: 100%;
height: 11%;
background-color: pink;
}
.term{
background-color: black;
height: 100%;
width: 25%;
display: inline-block;
border-right: solid red;
}
.term:first-child{
margin-left: 0;
}
.term:last-child{
border-right: none;
}
<div id="panel">
<div id="header">
<div id="audio"></div>
<div id="term">
<div class="term"></div>
<div class="term"></div>
<div class="term"></div>
<div class="term"></div>
</div>
</div>
<div id="content"></div>
<div id="footer"></div>
</div>
But when I see the result, the divs which are in the term div have some space between each other. Setting the padding and margin to zero doesn't remove the space.
What should I do to remove the space to set the divs exactly near to each other?
One solution is to use in term container display: flex:
body {
background: url("../imgs/bg_pattern.gif") scroll 0 0% repeat, url("../imgs/1.jpg") no-repeat scroll 0 0% / 100% 100%;
margin: auto;
}
#panel {
height: 100%;
width: 300px;
background-color: #232325;
float: right;
}
#audio {
width: 100%;
height: 11%;
background-color: red;
}
#term {
width: 100%;
height: 11%;
background-color: blue;
display: flex;/*Add display flex*/
}
#content {
width: 100%;
height: 67%;
background-color: green;
}
#footer {
width: 100%;
height: 11%;
background-color: pink;
}
.term {
background-color: black;
height: 100%;
width: 25%;
display: inline-block;
border-right: solid red;
}
.term:first-child {
margin-left: 0;
}
.term:last-child {
border-right: none;
}
<div id="panel">
<div id="header">
<div id="audio"></div>
<div id="term">
<div class="term">asd</div>
<div class="term">asd</div>
<div class="term">asd</div>
<div class="term">asd</div>
</div>
</div>
<div id="content"></div>
<div id="footer"></div>
</div>
Reference
flex
the problem is that Inline-block have some default spaces ,
use Float to left better than Inline-block and use a clearfix class :
#term{
width: 100%;
height: 11%;
background-color: blue;
**overflow: hidden;**
}
.term{
background-color: black;
height: 100%;
width: 25%;
**float : left ;**
border-right: solid red;
}
http://jsfiddle.net/n0zxmgoy/
As stated earlier, any white space between inline blocks is retained in the layout, so one way
of getting rid of it is to make sure that the inline block elements have no intervening space
in the HTML mark-up.
Also, you need to set a reference height so that the height percentage values work as expected.
I did this by adding height: 100% to the html and body tags.
Also, make sure to add a height value to the #header element, which makes the arithmetic
a bit easier to deal with.
A subtle point involves the right border on the .term elements. You can either use the
CSS calc value or box-sizing: border-box, you can try either.
html, body {
height: 100%; /* this may be needed... */
}
body{
background: url("../imgs/bg_pattern.gif") scroll 0 0% repeat, url("../imgs/1.jpg") no-repeat scroll 0 0% / 100% 100%;
margin: auto;
}
#panel{
height: 100%;
width: 300px;
background-color: #232325;
float: right;
}
#header {
width: 100%;
height: 22%;
}
#audio{
width: 100%;
height: 11%;
background-color: red;
}
#term{
width: 100%;
height: 50%;
background-color: blue;
}
#content{
width: 100%;
height: 67%;
background-color: green;
}
#footer{
width: 100%;
height: 11%;
background-color: pink;
}
.term{
background-color: black;
height: 100%;
width: calc(25% - 2px);
/* box-sizing: border-box; optional alternative */
display: inline-block;
border-right: 2px solid red;
}
.term:first-child{
margin-left: 0;
}
.term:last-child{
border-right: none;
width: 25%; /* you need to consider this... */
}
<div id="panel">
<div id="header">
<div id="audio"></div>
<div id="term">
<div class="term"></div><div class="term"></div><div class="term"></div><div class="term"></div>
</div>
</div>
<div id="content"></div>
<div id="footer"></div>
</div>
So I have this html
<div class="app-wrapper">
<div class="search-form"/>
<div class="results">
<div class="tabs"/>
</div>
</div>
search-form has absolute positioning and is floated left. I want tabs to appear next to it, but at the top of the page. Note it doesn't have to be that tabs is always on the screen(fixed is not required).
Right now I have
.search-form {
position: absolute;
width: 30%;
min-width: 200px;
max-width: 350px;
height: 100%;
min-height: 600px;
float: left;
}
.tabs {
position: fixed;
border-bottom: 1px solid #section-border;
width: 70%;
height: 3.0em;
float: right;
left: 31%;
background: #tabs-background;
}
But this doesn't work because on larger screens the distance between tabs and the search-form expands.
How do I get it so tabs is next to search-form, fills up the rest of the page, and that the distance between tabs and search-form does not depend on screen size?
So I just realized that tabs is inside of another div, with CSS
.results {
width: 70%;
}
Maybe this is what you are looking for: http://jsbin.com/ofagoq/11/edit
The CSS:
.search-form {
background-color: red;
width: 30%;
min-width: 200px;
max-width: 350px;
height: 100%;
min-height: 600px;
float: left;
}
.tabs {
background-color: green;
width: 70%;
height: 3.0em;
}
This is an approach using % for your widths only. You could set max and min widths as well in %. http://jsbin.com/upucob/1/
.app-wrapper {
width:90%;
float:left;
margin:1em 3%;
padding: 1em 2%;
background: #CCC;
}
.search-form {
width: 30%;
min-height: 600px;
float: left;
background:#999;
}
.tabs {
width: 70%;
height: 3.0em;
float: left;
border-bottom: 1px solid #000;
background:#888;
}
<div class="app-wrapper">
<p>This is the outter container</p>
<div class="search-form">
<h3>Form goes here</h3>
</div>
<div class="tabs">
<h3>Tabs</h3>
</div>
<div class="results">
<h3>The Results</h3>
</div>
</div>
I have two divs within a container. One floats left and one floats right. Both are about 60% as wide as the container and are designed such that they overlap in the middle (right div takes priority).
How do I get them to overlap rather than stack vertically like floating elements usually do? If I absoultely position the right element the containing div doesn't expand to fit the content.
Code (unfortunately I cannot jsfiddle this as their servers are read only atm):
<div id="container">
<div id="left">left</div>
<div id="right">right</div>
</div>
#container {
width: 400px;
background-color: #eee;
}
#left {
width: 250px;
border: 1px solid #ccc;
display: inline;
float: left;
}
#right {
width: 250px;
border: 1px solid #ccc;
display: inline;
float: right;
}
Use a negative margin-right on the left box so that the right box is allowed to overlap:
#left {
width: 250px;
border: 1px solid #ccc;
display: inline;
float: left;
margin-right:-104px;
}
The 104 pixels is the overlap amount plus 4px for borders.
Here's a jsfiddle.
You can only do that with positioning.
<div id="container">
<div id="left">left</div>
<div id="right">right</div>
</div>
#container {
width: 400px;
background-color: #eee;
position: relative;
}
#left {
width: 250px;
border: 1px solid #ccc;
position: absolute;
left: 0;
top: 0;
z-index: 1;
}
#right {
width: 250px;
border: 1px solid #ccc;
position: absolute;
right: 0;
top: 0;
z-index: 2;
}
You could create the divs with absolute position and add a positive z-index to the one you want to be in front.
<div id="container">
<div id="left">left</div>
<div id="right">right</div>
</div>
#container {
width: 400px;
background-color: #eee;
position: relative;
}
#left {
width: 250px;
border: 1px solid #ccc;
display: block;
position: absolute;
top: 0px;
left: 0px;
}
#right {
width: 250px;
border: 1px solid #ccc;
display: inline;
position: absolute;
top: 0px;
right: 0px;
z-index: 1;
}
Can you add an extra div in there?
<div id="container">
<div id="left">
<div id="left-inner">left</div>
</div>
<div id="right">right</div>
</div>
<style>
#container {
width: 400px;
}
#left {
float: left;
width: 0px;
overflow:visible;
}
#left-inner {
float: right;
width: 250px;
}
#right {
width: 250px;
}
</style>
Make container bigger so both fit. Then use position relative and left: -100px or whatever on the one on the right.
Excellent Solution: http://jsfiddle.net/A9Ap7/237/
So, dont use:
MARGIN-LEFT:100px...
==
or similar commands.
The problem is that, if the left elements size is changed, if window is resized or etc,,, then it will make you problems!
so, dont use such custom dirty "tricks", but make a normal structure inside html, so they should be naturally ordered.
Try this one:
<div id="container">
<div id="left">left</div>
<div id="right">right</div>
</div>
<style>
#container {
width: 400px;
background-color: #eee;
}
#left {
width: 250px;
border: 1px solid #ccc;
float: left;
}
#right {
width: 250px;
border: 1px solid #ccc;
margin-left: 150px;
position: absolute;
}
</style>
How about pulling the right div with negative margin. Something like this?
<div id="container">
<div id="left">left</div>
<div id="right">right</div>
</div>
#container {
position: relative;
width: 400px;
height: 110px;
background-color: #eee;
}
#left {
width: 250px;
height: 100px;
border: 1px solid green;
float: left;
}
#right {
position: relative;
float: right;
width: 250px;
height: 100px;
top: -100px;
border: 1px solid red;
}