I have a 960px wide wrap, and then a 930px wide main-content wrap with 15px left/right margins. within the main-content wrap there are three divs floated left that are each 280px wide, with 15px margin-right to fill the main-content. To avoid giving the div to the right a margin and make it not fit I gave it another class and set its margin-right to 0.
I am trying to make the site responsive and these are my percentage calculations:
wrap=100%
main-content=96.875%
main-content margins=1.5625%
divs=30.10752688%
div margins=1.61290323
CSS:
#page-wrap {
width:960px;
margin: 0 auto;
background: white;
}
#main-content {
width:96.875%;
margin:15px 1.5625% 0 1.5625%;
}
.box { (the divs)
float:left;
width:30.10752688%;
min-height:160px;
margin:30px 1.61290323% 0 0;
}
.right{ (only the div to the right)
margin-right:0;
}
HTML
<div id="page-wrap">
<div id="main-content">
<div class="box">
content
</div>
<div class="box">
content
</div>
<div class="box right">
content
</div>
</div>
</div>
I don't know why the divs dont seem to resize correctly. Any help would be much appreciated!
The site can be viewed here for now: http://hl.kylmark.se
The problem I see is that there's a fixed 10px padding around all of the blue boxes. Since the padding is added on to an element's width, it throws off your percentage math.
Solution 1
You could just change the side padding on those boxes to a percent value like everything else:
.blue {
...
padding: 10px 1.0752688%;
}
With that approach you'd be collapsing the borders as you get smaller, which may not be desirable.
Solution 2
Maybe a better approach is to change the box-sizing property to calculate width from border to border rather than from content edge to content edge. That way you can have a 10px padding inside a flexible container whose width is figured correctly:
.box {
...
width: 32.258065%;
box-sizing: border-box;
}
One more thing
You may also want to watch out for is sub-pixel rounding. When your percentages calculate to something other than a whole pixel, the browser has to decide how to round it. If too many things are rounded up, the widths will get too big and cause content jumps like that in some browsers. You'll want to double-check that in your supported browsers. You can read a good explanation here.
Related
I still have problem to well understand how the float property works in CSS. I do apologize because I know this is css basics but I really want to understand that and get a good explanation. I've created an example to show you.
Here is my page :
I just want to resize the second div at the right. When I look at it in the Chrome Developer Tools, I see that this div begins at the top left of the window and not after the red square. I'd like it to begins just after the red square to change the width properly without calculating the size of the square and doing something like
width = square size + width i want
Do you know how this it happens and how to properly resize the width of the second div ?
EDIT: the solution consists in add the float property to the second div too. The explanation is the following : floated elements are removed from the flow, so they don't stack with the non-floated elements.
You need to set float for another div too.
We generally do like below:
html
<div class="float-left">
<p>floated left</p>
</div>
<div class="float-left"><!--- to float next to previous div--->
<p>floated left</p>
</div>
css
.float-left{
float: left;
}
As per your comment:
We do clear the float values because the container contents would never been collapsed.
You need to float the second div.
Heres an example.
<div class="parent-div">
<div class="left">
</div>
<div class="left">
<p>This is the description of the image</p>
</div>
</div>
You need to set
p { display:inline; }
or
div { display:inline; }
since paragraphs and divs are block elements.
http://www.w3.org/TR/CSS2/visuren.html#block-boxes
the reason is that floated elements are removed from the flow, so they don't stack with the non-floated elements. - therefore they don't "take up space" like before. This is why your text div starts at the top left of its container.
from MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/float
The float CSS property specifies that an element should be taken from the normal flow and placed along the left or right side of its container, where text and inline elements will wrap around it. A floating element is one where the computed value of float is not none.
You have to set float for both DIVs
Here is the updated code:
HTML:
<div id="main_container">
<div class="left"></div>
<div class="right">
<p>This is the description of the image <i>Random text</i>
</p>
</div>
<!--Comment below <DIV> to see the result-->
<div class="clear"></div>
</div>
CSS
#main_container {
border:5px solid #000;
}
.left, .right {
width: 100px;
height: 100px;
background: red;
float:left;
}
.right {
background: blue;
width: calc(100% - 100px);
}
.clear {
clear:both;
margin:0;
padding:0;
}
Also, just to add one more important fact related to "float" is, make sure you add "clear:both" property after "float".
Why?? Because, a common problem with float-based layouts is that the floats' container doesn't want to stretch up to accomodate the floats. If you want to add, say, a border around all floats (ie. a border around the container) you'll have to command the browsers somehow to stretch up the container all the way.
Here is the Fiddle for the same: http://jsfiddle.net/1867ud9p/7/
Hope this will help!
I am new to Css. I have an HTML page.
<body>
<div id="viewer">
<div id="flow">
<img src="images/beatles.jpg">
<img src="images/blink.jpg">
<img src="images/doves.jpg">
<img src="images/flash.jpg">
<img src="images/floyd.jpg">
<img src="images/jurassic.jpg">
<img src="images/naked.jpg">
<img src="images/prodigy.jpg">
<img src="images/xx.jpg">
<img src="images/zabiela.jpg">
</div> <!--end of <div id="flow"> -->
<ul>
<li id="left">
Left
</li>
<li id="right">
Right
</li>
</ul>
</div> <!--end of <div id="viewer"> -->
</body>
Each image is 200x200. Now i am confused with the css of it. Here i show it step by step
#viewer {
width:700px;
height:220px;
padding:100px 0 30px;
margin:auto;
border:1px solid #000;
position:relative;
}
You define width and height of main Div. Define padding, means each element that is place inside div will place 200px from top, no sapce from left and right, 30px space from bottom of div. Also i want to ask here we define position relative. Is it relative with respect to body or html?
We didn't define the #flow div width and height. So it calculated by the padding. The #flow div width is same as the #viewer width, but place 30px below from top of #viewer div, it's height is 190px, place 30px above from bottom. Please tell me if i am wrong.
#flow:after {
content:"";
display:block;
height:0;
clear:both;
visibility:hidden;
}
Now we are defining content that we want to enter after the #flow div. We set it's visibility hidden, means it is there, taking up the space but not showing. Is it? The thing that i want to ask here is this, that we are using clear:both here. What are we clearing here? we didn't set any float property in the #viewer div?
Now comes the confusing part
#flow img {
display:block;
margin-left:-165px;
position:relative;
top:-15px;
left:245px;
float:left;
background-color:#fff;
}
Now we are setting images, that are in the #flow Div. First thing that i notice which is confusing that if i set it's top property to 1px. Then it align with respect to # flow div. Which is fine because it's position is relative, and it is inside #flow div, so it is aligning with respect to #flow div.
But when i change it's left property to 1px. Then it goes beyond the both divs(#viewer and #flow). Align itself somewhere between the mid of scree left corner and left of div. Why it is happening. If it's position is relative, then it should remain inside the #flow div. This is my confusion.
Also images are shrink to accommodate inside the div. I think it's because of the dov size. That each image is 200x200. Our #flow width is 700px only.
Another thing we set margin-left:-165px;. Right now images are arrange horizontally and also shrink to accommodate in the div. But if i change to margin-left:165px;. Then images are expand vertically and all images are shown. Images are not shrink. Also we set top:-15px;. When are we set values in negative?
It's not an assignment or homework. I am just practicing and i want to know how things are working. Here are the remaining css
#viewer li {
list-style-type:none;
position:absolute;
bottom:10px;
}
#left {
left:20px;
}
#right {
right:20px;
}
Thanks
A good start to find out how the css works is to install firefox with firebug. In firebug, you can hover over elements to see their styling.
Secondly, I would place the images in li tags for better organization.
I have following code
<h1>Test</h1>
<p>Another test</p>
h1
{
border:2px solid red;
margin-bottom:30px;
}
p
{
border:2px solid red;
margin-top:20px;
}
Live fiddle here http://tinkerbin.com/dnhA713P
I want to have 50px space between h1 and p but its not getting the 50px space.
It's called collapsed margins. Here's a good article for mortals:
http://reference.sitepoint.com/css/collapsingmargins
And here's the specs for the rest of you:
http://www.w3.org/TR/CSS2/box.html#collapsing-margins
In simple terms, this definition indicates that when the vertical margins of two elements are touching, only the margin of the element with the largest margin value will be honored, while the margin of the element with the smaller margin value will be collapsed to zero.
If you use something like Chrome developer tools you can right mouse button on an element and get a visual of the box model for your elements. See these screenshots for reference. I think the answer will become clear once you see the visuals. The problem is collapsed margins.
I believe the reason you aren't getting your expected results is because since you already gave the h1 element a margin-bottom of 30px, the p element already has a margin above it equal to 30px, so telling it to have a margin-top of 20px does nothing. Try giving the p element a margin-top of 40px and watch the margin between them increase by 10px.
I don't see how that doesn't work... but you'd only get a 30px margin. The bigger margin takes precedence. You can also try wrapping them in <div> elements and assigning a 50px margin to one of the two.
http://jsfiddle.net/LuDvL/
<div id="header">
<h1>Test</h1>
</div>
<div id="content">
<p>Another test</p>
</div>
/* either one of these should work */
#header { margin-bottom: 50px; }
#content { margin-top: 50px; }
In my CSS, I need to make the width of a div 100% - 10px. Is this possible? If so, how?
Pretty straight forward and simple.
This is not possible in CSS. You simply can't do any calculations in CSS. You'll have to rely on Javascript for that.
If you absolutely need it to work through CSS only, you should wrap it in a div with a padding.
HTML:
<div class="wrapper">
<div class="inner"></div>
</div>
CSS:
.wrapper {
padding-right: 10px;
}
And here's the fiddle: http://jsfiddle.net/sZvDY/
Use a margin set it to 5px left and right if you want it centered or 10px either side.
I currently have a div with width:auto to fill the entire screen width but I want to put a side bar on the right hand side.
When I float the width:auto div left and fixed width div to the right it goes under instead.
I'm basically looking for something similar to what reddit have with there search bar on the right width the content auto adjusting to the page width.
Thanks
You can make it like this:
Say you have those 2 divs inside a parent container, which expands to fit the page:
<div id="container">
<div id="autowidth">text expands her...</div>
<div id="fixed">This is a fixed column</div>
</div>
In your CSS:
#container {
width:100%;
border:1px solid black;
padding-right:200px;
}
#autowidth{
width:100%;
background-color:red;
float:left;
}
#fixed{
width:200px;
background-color:green;
float:right;
margin-right:-200px;
}
Basically, the parent container holds everything together. It has a padding of 200px (the width of the right col), so that its content doesnt goes beyond that point. In turn, the right col has a margin of -200px, so that it forces the boundaries imposed by the parent padding and places itself always at the foremost right. The other div, actually, now has only the spaces provided by the parent container, constrained by its padding, so its 100% would be, in fact, (100% - (parent's padding)). You can see a working result of this here: jsfiddle.
I'm pretty sure there might be more elegant solutions out there, so bear with me.
if you want to give a background, like it were 2 cols, you can go for the classical 'faux columns' background (see example at a list apart )
You don't strictly need a container div. I did css inline for brevity.
<div style="float:right; width:14em; background-color:#CCC;">
<p>This div is fixed-width.</p>
</div>
<div style="background-color:#EEE; margin-right:14.5em;">
<p>This div is auto-width.</p>
</div>
The answer doesn't work for me, I think it's outdated. Now you have to specify box-sizing: border-box for padding to count to width, but thanks for inspiration. This is my solution.
#autowidth {
float:left;
width:100%;
padding-right:200px;
box-sizing:border-box;
}
#fixed {
float:right;
width:200px;
margin-left:-200px;
}