I have 3 div blocks inside another div.
What I wanted to do is to put them inline, but the first 2 div blocks should take a width according to their content and the last div take the remaining space.
<div class="container">
<div class="red">Red</div>
<div class="green">Green</div>
<div class="blue">Blue</div>
</div>
I try to avoid the use of fixed widths because I need to use this in a responsive design.
How can I make the blue div in this fiddle take the rest available space of its parent and act responsive if the screen is resized?
float: left the red and green and the blue get width: clac(100% - 100px)
.blue {
width: calc(100% - 100px);
}
http://jsfiddle.net/6kLVn/190/
I believe if you don't want to specify any pixel or percentage widths at all and make the red and green containers only as wide as their content, you will need to wrap them inside their own container, named .left below:
<div class="container">
<div class="left">
<div class="red">Red</div>
<div class="green">green</div>
</div>
<div class="blue">blue</div>
</div>
If you now float .left to the left, and also float .left div to the left, you now no longer need to specify any inline-block elements. The blue container will simply take up as much space as it has available until the end of the .container.
.left {
float: left;
}
.left div {
float: left;
}
Fiddle
Edit
Silly me, the .left container is obviously not needed as long as you just add float: left to your red and green blocks, just like #Ennui said above in the comments :)
Updated fiddle
Change your css to this:
.container{border: 2px solid black; padding: 5px; position: relative; width: 100%;}
.container div {height: 20px;}
.red{border: 2px solid red; display: block; float: left;}
.green{border: 2px solid green; display: block; float: left;}
.blue{border: 2px solid blue;}
Tested in Chrome
EDIT
Silly me, this is the forked jsfiddle: http://jsfiddle.net/BWRVk/
I guess it is all based on what you want your images to be. I just used % on the images to show they can be resized according to responsive design. http://jsfiddle.net/6kLVn/7/
HTML
<div class="container">
<div class="red">Red</div>
<div class="green">green</div>
<div class="blue">blue</div>
</div>
CSS
.container{border: 2px solid black; padding: 5px; position: relative; margin:0px; width: 100%;}
.container div {height: 20px; display: inline-block; padding:0px; margin:0px;}
.red{border: 2px solid red; width:31%; }
.green{border: 2px solid green;width:31%;}
.blue{border: 2px solid blue;width:31%;}
If you want it to be responsive, give the divs % widths.
http://jsfiddle.net/feitla/6kLVn/6/
.container div {height: 20px;}
.red{border: 2px solid red;width:10%;display:inline;}
.green{border: 2px solid green;width:10%; display: inline;}
.blue{border: 2px solid blue;display:inline-block;width:80%;}
Give the container display: flex , each div flex: 1 and the last div give it flex-shrink: 1; width: 100%
Example here - http://jsfiddle.net/wtsn3uzh/
Related
I have these 3 div's. they are set to display inline-block in a wrapper with a width of 1000px. each div is 330px. I have some issues getting them to line up but i dont want to use float left.
How do i display them inline block?
image of my issue
All you need to do is add vertical-align to your elements. The value depends on how you want the elements to align, but you're probably looking for vertical-align: top.
Without vertical-align:
body {
width: 1000px;
}
div {
background: red;
width: 330px;
height: 100px;
display: inline-block;
}
<div>ASDASD</div>
<div>ASD</div>
<div></div>
With vertical-align:
body {
width: 1000px;
}
div {
background: red;
width: 330px;
height: 100px;
display: inline-block;
vertical-align: top;
}
<div>ASDASD</div>
<div>ASD</div>
<div></div>
Hope this helps! :)
Can you share a fiddle with your code, otherwise this seems to work
<div style="width:1000px;background:#aaa">
<div style="width:330px;display:inline-block;background:#f00">
a
</div>
<div style="width:330px;display:inline-block;background:#0f0">
b
</div>
<div style="width:330px;display:inline-block;background:#00f">
c
</div>
</div>
See https://jsfiddle.net/ptornhult/xoqLgtq1/
they should automatically line up if they have space. There is something else pushing it down, see below as long as you have width they should auto line up.
.wrapper {
width: 1060px;
border: 10px solid green;
}
.inline {
border: 10px solid red;
height: 500px;
width: 330px;
display: inline-block;
}
borders have a impact on size as well so you need to have the wrapper fit borders as well (hence why my wrapper is slightly larger).
https://codepen.io/Zuriel/pen/VMmdbw
Here is a JSFiddle trying to replicate your issue.
https://jsfiddle.net/4pvebp05/
It may be that you have not set your container to be display: block?
In that case, try vertical-align: middle
We can do two different ways
Display inline-block.
<div class="inline">
<div>
First
</div>
<div>
Second
</div>
<div>
Third
</div>
</div>
CSS
.inline{
width:1000px;
}
.inline div{
display:inline-block;
width:330px;
}
https://jsfiddle.net/md25je2g/
Display flex divide three equal column
<div class="flex">
<div>
First
</div>
<div>
Second
</div>
<div>
Third
</div>
</div>
CSS
.flex{
display:flex;
width:1000px;
}
.flex div{
flex:1;
border:1px solid red;
}
https://jsfiddle.net/mL3eqvoe/
I am trying to align the child div tag but as per below image i specified width:auto , but all 3 div are aligned left.
fiddle link
is there any way i can make the child div expand automatically to make to fit the free space of parent div?
i came across several questions but not related to this, apologizes if its a duplicate.
Edit:
i want all the 3 divs to occupy 100% of the width. instead of aligning it to left. i cannot assign 33% to each because sometimes one of the child div may have more text.
here i have the image of how i expect...
some more clarification about what i expect
you can set width of child element with calc function.
62px = 20px of left and right padding, 40px of right and left margin and 2px of left and right border
width:calc((100% / 3) - 62px);
You can use table-cell or flex to achieve what u want (geting all the width from your parent). If not, then another way is to play with your childs width-percentage and maybe some display-inline.. also floating will mess that up, so remove it..
as i understand u ask smth like the above snippet:
#parent {
border: 1px solid #666;
width:100%;
min-height:150px;
display: table;
}
.child {
text-align:center;
border:1px solid #0000ff;
padding:20px;
background: #CCC;
margin:10px;
display:table-cell;
vertical-align:middle;
}
<div id="parent">
<div class="child">
test data 1
</div>
<div class="child">
test data 2
</div>
<div class="child">
test data 3
</div>
</div>
With the effect you are trying to accomplish. You don't want to float the divs. They just need to have the correct CSS.
CSS
#parent {
border: 1px solid #666;
width: 100%;
}
.child {
border:1px solid #0000ff;
background: #CCC;
padding: 20px 30px;
margin:20px 20px;
}
jsfiddle for vertical alignment
EDIT BELOW
If you want them all in a horizontal line, you need to remove the whitespace from the html elements and then assign the correct width and margins.
HTML
<div id="parent">
<div class="child">
test data 1
</div><!-- remove whitespace
--><div class="child">
test data 2
</div><!-- remove whitespace
--><div class="child">
test data 3
</div>
</div>
CSS
* {
box-sizing: border-box;
}
#parent {
border: 1px solid #666;
width: 100%;
}
.child {
border: 1px solid #0000ff;
background: #CCC;
width: 30%;
display: inline-block;
padding: 10px;
}
.child:nth-child(2) {
margin: 0px 5%;
}
Working Fiddle for horizontal alignment
why don't you try to use table. You can use 3 <td> tag (table data) inside a <tr> tag
I'm making a web site responsive, and on the home page I should insert two "containers" that should be centered and aligned. (containers in this case are two divs with inside images and text)
I wish they would behave in this way
and when the page is "restricted", the two divs should position itself in this way
I tried like this, but it is not exactly what I would get
<div style="">
<div style="width: 300px;float: left;">
div 1
</div>
<div style="width: 300px;float: left;">
div 2
</div>
</div>
I'd try to use display: inline-block property. In this way you don't have to apply 'overflow' for parent and it's pretty easy to make blocks centered.
HTML:
<div class="wrapper">
<div class="box">Div 1</div>
<div class="box">Div 2</div>
</div>
CSS:
.wrapper {
text-align: center;
/* Just decoration */
border: 1px solid blue;
padding: 20px;
}
.wrapper .box {
display: inline-block;
width: 300px;
height: 50px;
/* Just decoration */
border: 1px solid green;
}
Take a look at the fiddle http://jsfiddle.net/caprella/y4BQ3/
I put something quick together for you. You will have to use media queries to find the size of the page when you want the style to switch. Mess around with my example and you should be able to figure something out to your liking.
<div id="box">
<div class="innerBox">
div 1
</div>
<div class="innerBox">
div 2
</div>
<div class="clear"></div>
</div>
And the CSS...
#box {
width:88%;
background:red;
padding:20px 6%;
}
.clear{clear:both}
.innerBox {
width:41%;
float:left;
background:blue;
display:block;
}
.innerBox:first-child {
margin-right:18%;
}
#media screen and (max-width: 400px) {
#box .innerBox {
float:none;
width:100%;
margin:20px 0 0 0;
}
#box .innerBox:first-child {
margin-top:0;
}
}
}
JsFIddle link: http://jsfiddle.net/x3JLX/
Check out this Fiddle. There's only a few simple changes to your existing code, which I included below.
http://jsfiddle.net/ArKKG/
<div style="overflow:auto; height: 100% text-align: center;">
<div style="width: 300px; height: 50px;float: left;">
div 1
</div>
<div style="width: 300px;height: 50px;float: left;">
div 2
</div>
</div>
And some CSS to make them visible, and keep the borders separated.
div{
border: 1px solid black;
margin: 4px;
}
This question already has answers here:
2 column div layout: right column with fixed width, left fluid
(8 answers)
Closed 8 years ago.
Im searching for a way to have 2 divs as columns where div on right has a fixed width and div on left fill remaining space.
Does anyone happen to know if this can be done?
My attempt (renders block2 underneath block1):
<style>
.block1 {
width: auto;
height: 200px;
background-color: green;
}
.block2 {
float: right;
height: 200px;
width: 200px;
background-color: red;
}
</style>
<div class="block1">test1</div>
<div class="block2">test2</div>
You can do it like this:
HTML:
<div class="right">right</div>
<div class="left">left</div>
CSS:
.left{
background:red;
}
.right{
float:right;
width:200px;
background:green
}
Check this live example http://jsfiddle.net/QHTeS/2/
Float Both of the elements left:
<style>
.block1 {
width: auto;
height: 200px;
float: left;
background-color: green;
}
.block2 {
float: left;
height: 200px;
width: 200px;
background-color: red;
}
</style>
<div class="block1">test1</div>
<div class="block2">test2</div>
You should wrap them in a container as well to prevent messing up the rest of your layout. :)
http://jsfiddle.net/tcFjN/
That was wrong!
Use display: table; on parent and display: table-cell; on children:
<div id="wrapper">
<div class="block1">test1</div>
<div class="block2">test2</div>
</div>
#wrapper
{
display: table;
width: 100%;
}
.block1 {
width: auto;
height: 200px;
display: table-cell;
background-color: green;
}
.block2 {
display: table-cell;
height: 200px;
width: 200px;
background-color: red;
}
http://jsfiddle.net/tcFjN/1/
This is my solution without floats. The only caveat is that I need to use a wrapper. So, if the desired HTML is
parent (has a border, margin, padding,...)
left (fixed width)
right (variable width, fill the entire space)
I must rewrite it as
parent (has a border, margin, padding,...)
wrapper (has no styling)
left (fixed width)
right (variable eidthm, fill the entire space)
My HTML is
<div style="border:1px solid black; background:red; margin:10px; padding:10px;" >
<div style="">
<div style="display:table-cell; padding:10px; min-width:100px; max-width:100px;background:green;">Left</div>
<div style="display:table-cell; padding:10px; width:100%; background:yellow;">Main content</div>
</div>
</div>
The main points here are:
No use display:table because then we can not set the border
The use of min-width, max-width
The use of width:100%
Check this jsfiddle
Start out with a container <div> (#container) that holds both the left and right <div>s. Float one <div> to the right and give it a specific width (320px in my example). Then give the other <div> an absolute position starting at the absolute left (0px) and ending at the left edge of the <div> on the right (320px).
If you adjust the width of #container, the right <div> will remain fixed at 320px while the left <div> will expand to fill whatever the remaining area is.
I am a iPhone developer stuck with some basic CSS properties ;)
I want to show something like this:
This is what I have:
<div class="cell">
<div class="cell_3x3_top">
<div class="cell_3x3_type rounded_left">type</div> <!--UPDATED:2010/09/29-->
<div class="cell_3x3_title rounded_right">title</div><!--UPDATED:2010/09/29-->
</div>
<div class="cell_3x3_content rounded_left rounded_right">content</div><!--UPDATED:2010/09/29-->
</div>
and the css:
div.cell_3x3_top{
height:20%;
margin: 0 0 0 0;
padding: 0 0 0 0;
border: none;
margin-bottom: 1px; /*to compensate space between top and content*/
text-align: center;
vertical-align: middle;
}
div.cell_3x3_type{
width:20%;
float:left;
background-color: inherit;
margin-right: -2px; /*UPDATED:2010/09/29*/
}
div.cell_3x3_title{
width:80%;
float:left;
background-color: inherit;
margin: 0 0 0 0; /* maybe not neccesary*/
padding: 0 0 0 0; /*maybe not neccesary*/
margin-left: -1px; /*UPDATED:2010/09/29 */
}
div.cell_3x3_content{
height:80%;
background-color: inherit;
}
But when I render my content with above code title div seems to be too large and it appears underneath type div, Why is this?
type div is 20% width, title is 80% width so it should be 100% exactly. Is any margin or other metric I am forgetting here?
I have tried to move title div to the left using margin but is still buggy. I wonder what is the correct way of getting something like the picture?
(Not exactly because if you look closer title div is a little bit shorter than it should be. See that its right border is not aligned with content div.)
Thanks in advance.
EDIT: 2010/09/28
This is actually what I want to achieve:
and this is what I have:
Above code (updated a little bit) would work if I wouldn't have bordered divs. Since border width is 1px what I need is to set type div width to 20%-2px (left border + right border = 2px) and title div to 80%-2px
.rounded_left{
border-top-left-radius: 4px 4px;
border-bottom-left-radius: 4px 4px;
border-color:gray;
border-width: 1px;
border-style:solid;
}
(.rounded_right is similar)
This is not related to clear:both property I believe. I tried and didn't had any effect since my content div was good form the beginning.
In short: How can I make a div including its border to be let's say exactly 20% width?
Ignacio
ANSWER:
I realized that a wrapper div around type and title respectively solves the problem. So my answer is kind of like this:
<td class="cell">
<div class="cell_3x3_top bordered">
<div class="cell_3x3_type_container"><div class="cell_3x3_type rounded_left full_height">6</div></div>
<div class="cell_3x3_title_container"><div class="cell_3x3_title rounded_right full_height">title</div></div> </div>
<div class="cell_3x3_content rounded_left rounded_right">content</div>
</td>
I set 20% and 80% in the containers and the borders in the inner div.
You are missing a clearing div. The floating elements do not expand the .cell_3x3_type div as you would expect. Try this instead:
<div class="cell">
<div class="cell_3x3_top">
<div class="cell_3x3_type">type</div>
<div class="cell_3x3_title">title</div>
<div class="cell_3x3_clear"></div>
</div>
<div class="cell_3x3_content">content</div>
</div>
CSS:
div.cell_3x3_clear {
clear: both;
}
The rest remains the same.
EDIT:
A small explanation of what the clear property does: consider a container div that contains only floated elements, like this (using inline CSS for clarity):
<div id="container" style="border: 1px solid green;">
<div style="float: left; height: 30px; width: 30px; border: 1px solid red;"></div>
<div style="float: left; height: 20px; width: 20px; border: 1px solid blue;"></div>
</div>
(source: fii.cz)
The height of the container div is 0 because the floating elements are taken out of the document flow and do not affect the height of their container anymore. The clear: both property on an element "clears" all floats, i.e. makes sure that the element is placed below all floating elements that precede it:
<div style="float: left; height: 30px; width: 30px; border: 1px solid red;"></div>
<div style="float: left; height: 20px; width: 20px; border: 1px solid blue;"></div>
<div style="clear: both; height: 10px; width: 50px; border: 1px solid black;">Cleared</div>
(source: fii.cz)
If you combine the two above examples, you can force the container div to have its height equal to the height of the highest floating element in it:
<div id="container" style="border: 2px solid green;">
<div style="float: left; height: 30px; width: 30px; border: 1px solid red;"></div>
<div style="float: left; height: 20px; width: 20px; border: 1px solid blue;"></div>
<div style="clear: both; height: 0px; border: 1px solid black;"></div>
</div>
(source: fii.cz)