I have 2 div inside a fixed-width container.
div1 has a dynamic width, with a maximum of 50%. I want div2 to fill the remainder of the containers width.
<div id="container">
<div id="left"></div>
<div id="right"></div>
</div>
Here's an example on jsfiddle.
Fully expanded as supposed to: http://jsfiddle.net/RuD74/
Containers background visible due to right not expanding: http://jsfiddle.net/hgpcp/1/
How can I achieve this?
Updated JFiddle: http://jsfiddle.net/d5U96/2/
I see what you are trying to do. Instead, set the second div to have:
#right {
overflow: hidden;
height: 100%;
background-color: blue;
}
By doing this, it takes up all available width that's left except for the space occupied by the first floated div. Hopefully this does what you need.
A other thing that you can use it that you set the minimum width of your red/left box to 50%. This depends on what you would like to do with it.
#left {
float: left;
min-width: 50%;
max-width: 50%;
height: 100%;
background-color: red;
With this your div1 gets the minumum width of the helf of your block.
The only negative thing about this is, that you can't make it smaller in time, if you'd like.
Related
How do I set the width of a div if I want it to be exactly as wide as its contents are. However, I have many children in my DIV that inevitable collapse because they take up more horizontal space than the div allows.
I have this CSS:
.outer{
width: 100%;
background-color: green;
}
.inner{
width: auto;
display: inline-block;
margin: 0 auto;
background-color: red;
}
.row{
float: left;
width: 250px;
background-color: blue;
display: inline-block;
}
And this is my HTML:
<div class="outer">
<div class="inner">
<div class="row">asd1</div>
<div class="row">asd2</div>
<div class="row">asd3</div>
<div class="row">asd4</div>
</div>
<div class="clear"></div>
</div>
Here is my jsfiddle: http://jsfiddle.net/vullnetyy/pshao68g/
What I want to do here is:
the red div must be exactly as wide as the 3 blue divs in its first row
the red div must be centered within the green div
javascript must be avoided
no static width may be set to the red or green divs (because this is supposed to be responsive, and an arbitrary number of blue divs may be provided)
First of all, if you want to center an Element you need to make it:
display: block;
width : %/px;
margin-left: auto;
margin-right:auto;
If you want the 3 blue divs to be inside of the red div and to be exactly 3 blue = 1red width, give each blue 33.333% width.
such as in this example: https://jsfiddle.net/vullnetyy/pshao68g/
Theres two conflicting issues here.
1)You must have a set width in order to do margin-left/right auto.
2)If you float to try to match child width you cant do margin auto. Now I know you didnt put float left on inner. But you did do display:inline-block which has float left and a few other rules attached.
In this particular case, you have to compromise just a little to get the results you want. Simply set .inner to the same as the row aka 250px since we know thats how large the child will be, and remove display:inline-block and PRESTO!
try this for to your inner and see what happens.
.inner{
width: 250px;
margin: 0 auto;
background-color: red;
}
I want to make layout where I will have different full width backgrounds. For example top is full width orange color, inside the full width div I have container that keeps everything in specific dimension (width: 1000px). And I met a problem, The content of the container div doesnt stretch the full width div. So right now to keep it work, I have to set in .orange and .red specific height. But this is not the solution, because right now my block has xxx heights, what If I add something like more pictures - I have to set bigger hight etc...
Here is what I mean:
HTML
<div class="full-width orange">
<div class="container">
content
</div>
</div>
<div class="full-width red">
<div class="container">
content 2
</div>
</div>
CSS
.full-width {
clear: both;
width: 100%;
overflow: hidden;
}
.container {
width: 1000px;
margin-left: auto;
margin-right: auto;
overflow: hidden;
}
.orange {
background-color: orange;
}
.red {
background-color: red;
}
I am sorry for my bad english.
if you put more content into your DIVs, they will stretch. their default height is auto (http://www.w3schools.com/cssref/pr_dim_height.asp) which automatically stretches the div to the height it needs to be. if you set height to a percentage, the div will be that percentage of it's parent container.
here is a JS fiddle for you to play with http://jsfiddle.net/dv9ah/
i set the
height: auto;
in both the .red and .orange classes, but you can change them to a set height (like 100px) to see how they change.
I know there are tons of CSS side-by-side positioning questions, but I have a unique scenario that I haven't seen any answer that works.
I am stuck with the following HTML block, that I cannot change:
<div class="outer">
<div class="inner">
<label>...</label>
<table>...</table>
</div>
</div>
The "outer" div has a fixed width that can change at runtime. The "inner" div can repeat any number of times, and has a width of 100%.
I need to have each <label> element take up a fixed width of 150px, with the <table> element taking up the rest (ie, 100% of the remaining space).
No matter how I try to float the elements, etc, I can't get it to work correctly. Also, this application will only be used on machines with latest versions of Chrome / Firefox, so IE backwards-compatibility is not an issue.
Thanks!
You could add a padding left to the .inner and then negatively margin the label back into that space.
Like this:
.inner {
padding-left: 150px;
}
label {
width: 150px;
margin-left: -150px;
float: left;
}
table {
width: 100%;
border: 1px solid #000;
}
http://jsbin.com/IdayeTOp/1/edit
I have four div tags. One of them is .main div. The rest of the are inside .main with .sub classes. What I want is first to show 1st div tag inside .main and the rest will be placed on the right side of the first div tag but the overflow of the main div tag is hidden so that the other two div tags are not shown only the first is visible. I am trying to achieve this with this code. How can I achieve this?
.main {
width: 100%;
height: 500px;
background: red;
overflow: hidden;
}
.sub {
width: 100%;
height: 300px;
float: left;
}
.blue { background: lightblue; }
.green { background: green; }
.orange { background: orange; }
Assuming I've understood you correctly, and you want to see all three sub divs, one on the left, and two on the right, the problem is that you've set the widths to 100%, so there is no space to have them floating next to each other.
You need to set their widths so that they don't take up the full width of the container, for example they can each be 50% wide.
You also need to set the heights of the two divs on the right so that their total height is the same as the div on the left if you want them to line up.
Update:
To make it so that only the left div is visible initially, I think it's best you add another wrapper div around the the sub divs like this:
<div class="main">
<div class="wrapper">
<div class="sub blue"></div>
<div class="sub green"></div>
<div class="sub orange"></div>
</div>
</div>
With a width set to 200%.
.wrapper {
width:200%;
}
Then when you want the right hand divs to become visible, you can slide them onto the screen by repositioning the wrapper div, either with a transform, relative position, or margin setting.
Updated fiddle example
I don't know why but i have found that if you have space below the first item in this situation it won't work as expected..
so make the height of sub match then it will work:
.sub {
width: 100%;
height: 500px;
float: left;
}
http://jsfiddle.net/Ex9EC/2/
probably this is totally wrong approach though so wait for someone who knows to comment maybe?
Also I think there might be something about how the position of the outer/container div has to be set (to relative,absolute or fixed) which is why i added that but it seems to work without it too:
http://jsfiddle.net/Ex9EC/3/
http://jsfiddle.net/zEcn3/12/
I'm trying to get a div content that resizes to the number of divs that fit in a line. So the example works fine when the window is bigger than all the item divs combined so they're all in a row, but when the window is resized smaller so one of the items is reflowed to the next row, the content div's width is 100% instead of shrink wrapped.
The reason I want this is so I can have centered content with a menu bar above the content that shrinks to the size of the combined reflowed content.
HTML:
<div class="wrapper">
<div class="content">
<div class="item">Hello.</div>
<div class="item">Hello.</div>
<div class="item">Hello.</div>
<div class="item">Hello.</div>
<div class="item">Hello.</div>
</div>
</div>
CSS:
.item {
float: left;
width: 70px;
border: 1px solid black;
}
.content {
display: inline-block;
border: 1px solid black;
}
.content:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
A friend figured it out for me, the answer is to use media queries.
#media (max-width: 1080px) {
#main {
max-width: 640px;
}
}
So I set at the intervals of the width of each item div, so when the viewing window is smaller than a certain number, it sets the width of the container to the next level down.
I'm not quite sure if you were trying to remove the 100% width on the container, or just have the container shrink along with the content, depending on the size of the screen.
The problem, as I see it, is that when I shrink the screen, the last "Hello" on the right side gets pushed down to the next row.
So what I did is set 100% width to the wrapper. I then just removed the fixed width from the items and changed it to % widths. In this case I took the number of boxes and divided them into 100%, which was 20% each (but with 1px border I reduced to 19% each). Also, I added display:block; margin-left:auto; margin-right:auto; to the id="content".
Here's the link to JS Fiddle: http://jsfiddle.net/rm2773/Lq7H7/
I found the answer here:
http://haslayout.net/css-tuts/CSS-Shrink-Wrap
It basically amounts to using display: inline-block; on the block element you want to shrink to fit its contents.
Try to use margin:auto to the container <div> and set a fixed position.