I'm trying to turn my fixed site into a fluid site and I have a quick question on how %'s work.
<div class=wrap>
<div class=box>
<Div class=text>
<div class=box>
<div=class=wrap>
.wrap{
width: 100%;
}
.box{
width: 50%
}
.text{
width: 25%
}
Now given this code what happens? the wrap fits the entire screen. The box will fill 50% of the screen, but the text only fills 25% of 50%. It doesn't fill 25% of the entire screen, it only fills the percentage of its containing div. Is that correct?
It's because div is calculating its dimension from it's parent.
Div having class .Wrap calculating it's dimension from its parent i.e body that's why it takes entire body width.
Have a look in Box Model
Related
I have list of tiles with different widths. All of them are sitting inside the .projects with auto width, and it's wrapped by another div (.wrapper), which has 100% width.
<div class="wrapper">
<div class="projects">
<div class="pro p1"></div>
<div class="pro p2"></div>
<div class="pro p4"></div>
<div class="pro p2"></div>
</div>
</div>
I want to have .projects block centered, but .pro should be floating left, because I want to keep tiles aligned left, so I cannot use display: inline-block; for .pro elements.
It works perfectly if number of elements can fit in one row -> than .projects width is equal to sum of widths of all .pro containers inside (first and second example in Fiddle).
But if number of elements is bigger, they go to another row, .projects container became 100% width instead of real max width of inside elements.
Is it possible to achieve width of .projects not 100% if child elements doesn't fit in one row instead of effect from the last example?
Take a look on the code: http://jsfiddle.net/68U47/2/
.projects {
width: 600px;
margin: 0 auto;
}
[class^="pro"] {
display: inline-block;
width: 20%;
float: left;
}
Something like this should do it, basically margin 0 auto on the projects will center it on the screen.
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.
I have read answers on Stackoverflow, on how to stretch a div to full width when inside a fixed width container. But those are valid only if the content is inside one fixed container, what if the content is inside many div tags whose widths have been differently specified.
<div class='container' width="50%">
<div>
<div>
<div>
<div>
<div class="container-to-stretch"> Some Content </div>
</div>
</div>
</div>
</div>
</div>
Setting position to absolute and left and right to 0 simply doesn't work.
here is a jsfiddle that will help you http://jsfiddle.net/Fm7M5/
in your example (if i understand the question correctly), once CONTAINER has a width of 50%, that width is 100% for all of it's nested elements. so, the unclassed divs & CONTAINER-TO-STRETCH all have an automatic width that is 100% of CONTAINER.
so, you will need give CONTAINER-TO-STRETCH a width that larger than the width of its container.
in the jsfiddle, you can see the following (where TEST is a class given to one of the unclassed divs)
.container {
background-color: red;
}
.container-to-stretch {
background-color: yellow;
width: 400%;
}
.test {
width: 25%;
background-color: blue;
}
so, CONTAINER has a width that is 50% of the body, TEST has a width that is 25% of 50% of the body, and CONTAINER-TO-STRETCH has a width that is 400% of 25% of 50% of the body.
I am trying to center a set of floated blocks that contain images that scale dynamically. However I am having an issue where the inline-block I am using to enter the floated blocks is not shrinking to the new size of the image. Instead it will wrap to the original size of the image, leaving a big empty space.
http://jsbin.com/ewonas/1/
body {
text-align: center;
}
.inlineblock {
background: red;
display: inline-block;
}
.constrainer {
width: 20%;
float: left;
}
.constrainer img {
width: 100%;
}
<body>
<div class="inlineblock">
<div class="constrainer">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Smiley.svg/500px-Smiley.svg.png">
<h1>Product title</h1>
</div>
<div class="constrainer">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Smiley.svg/500px-Smiley.svg.png">
<h1>Product title</h1>
</div>
</div>
</body>
Can somebody please help me fix this issue?
Thanks
You are setting the width of the two .constrainer divs to 20%. What this means is that the width is 20% of the parent .inlineblock. So when you have to two of them that adds up to 40% of the parent. That means you have 60% remaining, or space for another 3 .constrainer divs.
To make the .inlineblock element shrink down, you would need to set the width of the .constrainer divs to a number independent of its parent e.g. a fixed width like 300px instead of a percentage.
Live example: http://jsbin.com/ewonas/6
I have a very simple layout with 2 DIVS: a fixed width left bar and a right area which should take up 100% of the remaining width. Both are 100% height, and I want the right item to have a vertical scroll bar if the height is taller than the window height.
My current code takes up the whole browser window, but the right area scrolls way off the browser viewable area to the right, and there is never a vertical scroll bar visible.
HTML:
<body>
<form id="Form2" runat="server">
<div class="page">
<div class="clear hideSkiplink">
Left side stuff goes here....
</div>
<div class="main">
Right size stuff goes here....
</div>
</div>
</form>
</body>
CSS:
div.hideSkiplink
{
padding:20px;
background-color:#990000;
position:fixed;
top:0px;
left:0px;
width:249px;
height:100%;
}
div.main
{
padding: 10px;
margin: 0px;
background-color: #000000;
color: #ffffff;
position: fixed;
top: 0px;
left: 250px;
width: 100%;
height: 100%;
}
When you give something width:100% it means 'whatever the width of my container, I will have the same width' -- it does not mean 'I will take up 100% of the available space'
In other words, let's say your parent DIV was 300 pixels wide -- if you give the child div width: 100%, it will be 100% of 300 pixels.
What you can do here, since your left column is fixed width, is add a left margin to the right div.
div.left
{
width: 249px;
}
div.right
{
width: 100%;
margin-left: 249px;
}
Some times you need to set the margin in the body in the CSS to 0.
EG.
body {background-color:#000; margin-left:0px;}
Cause by default some browsers have couple of pixel padding on the left hand side.
Instead of having the wider area fill up space, why not just make the left bar absolutely positioned and the main content <div> the fill up the whole page, with a padding-left to shift over the content?
A div with 100% width will fill the container it is in. Your container is 100% the width of the page. It doesn't take into consideration the fact you shifted it 250px to the right with absolute positioning.
your best bet:
.hideskiplink should come after .main in the flow. Float .hideskiplink to the left, give it a width, and then give .main a margin-left matching the width of .hideskiplink.
I've fixed my issue with this by setting the min-width to the 'body' to the same value as the width of my content within that div.