Hi this is a quick css 101,
I'm battling with aligning, maybe someone can help
on another note, i'd like to ask :
what is the correct way of thinking when
building html divs - restricting div's sizes upfront and overriden:hidden it's contect -OR- letting the inner divs push the parent and hence sizing it.
what measures are prefered for divs so it will fit best different resolutions?
rems/precents?
Thanks.
the wrapper should be a container for the content
<div id="wrapper">
<div id="top"></div>
<div id="content"><p>content here</p></div>
</div>
<div id="footerbg"></div>
I made the footer snap to the bottom outside of the wrapper, if you want to move the top outside that is also fine but remember you will have to adjust the bottom padding to compensate for its height too.
see jsFiddle here: http://jsfiddle.net/F577v/9/
Answer to your QNs:
dependent on the situation, I will always try allow for the content to size the div - but I make sure I have padding and margins to reflect design.
I have always used px count for sizing and use media types in css to compensate for different resolutions
You can make it with fixed position using css:
div {
position: fixed;
top: 400px;
bottom: 0;
left: 0;
right: 0;
}
Related
Quick question:
How do I create a layout where all the elements' backgrounds stretch across the width of the screen, but the content stays narrow, let's say 1000px? I'm looking to come up with something like this:
https://themeforest.net/item/itcore-site-template/3638733
For the record, I know how to code, I just don't know what the best approach is to this. I'm sure there's a 'best practice' to achieve this and having built 100% width dashboards only, I never worked with it.
Any tips?
You simply combine two elements, one that will fit the window (on which you can apply some background and other styling that cover the viewport), and another container in the center of the page. I recommend you to use max-width to allow it to shrink on smaller devices.
<div class="section">
<div class="wrapper">
Some content
</div>
</section>
Then your CSS is as simple as
.section {
background: (...)
background-size: cover; /* stretch to cover the whole container */
}
.wrapper {
max-width: 1000px;
margin-left: auto;
margin-right: auto;
}
Take a look at CSS Background size property. You can specify a fixed value in units, for example:
background-size: 100vw;
which would occupy the width of the screen.
Thanks LeBen, that's what I was looking for. I ended up creating a wrapper class that can be used for all elements and is styled using individual classes. Inside goes content like header, main, footer etc. and these are scaledwith media queries according to screen resolution.
<div class="wrapper bgLight">
<header>
Header content goes here
</header>
</div>
Thanks again!
on my website i want the footer at the bottom of the site. i add this to the footer css:
position: fixed;
bottom: 0;
width: 100%;
The footer is now good at the bottom but all the content goes on the footer div. Like the footer div is background. How can i put the footer at the bottom right?
You seem to be asking two different questions. Try raising the z-index of the footer element to keep it above other content.
To put it at the bottom right, set a width and a right position of zero.
I'm not sure if I understand your problem but you can try to add/change this in your footer css
right: 0;
width: 50%;
z-index: 999;
You'll need to make use of the CSS z-index property and give your main content container padding-bottom equal to the height of the footer to prevent your footer cutting off the bottom of your page.
Take a look at this article "How to keep footers at the bottom of the page":
http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
You will want to compensate for the height of the footer by adding the footer's height to the margin-bottom of your content's region. First, look for the element that appears right before your footer on every page. Hopefully it will be something like this:
<div id="header">
HEADER CONTENT
</div>
<div id="content" style="margin-bottom: 50px;">
YOUR SITES CONTENT
</div>
<div id="footer" style="position: fixed; bottom: 0; width: 100%; height: 50px;>
FOOTER CONTENT
</div>
Also, don't use inline styles like I have above. Use propper css please :) It helps all the internets.
Position: fixed takes the element out of the flow of the page. The result is that your footer is occupying "nothing" when it comes to affecting your other elements.
The reason your content is ending up on top is that it doesn't actually know it's there. What I mean is that you need to account for your footer when thinking of your other elements.
For instance, if you have a wrapper that ends just before your footer, you can give it an extra bottom padding that is equivalent to the height of your footer.
To answer a sort of hidden second part of your question: To be able to give an element a z-index, it needs to be position with something other than "static" (the default positioning). If you're trying to work out z-indexes on two different elements, you'll want to give them both a position value other than "static" to get total control.
Hope some of this helps,
iso
I wonder if there is way to set outerwidth of a div using css to ignore padding and borders.
When I set a div to be 50% width, padding and border will be added to the width. How can I solve that without javascript or jQuery.outerWidth() ?
Don't want to use an extra element
I'm wonder if there is way to set outerwidth of a div using css to ignore padding and borders.
You can use box-sizing: border-box to make padding and border be counted inside width:
div {
box-sizing: border-box;
}
See: http://jsfiddle.net/thirtydot/6xx3h/
Browser support: http://caniuse.com/css3-boxsizing
The spec: http://www.w3.org/TR/css3-ui/#box-sizing
Nest another div inside yours, and apply the paddings/borders to the nested one:
<div style="width:50%;"> <div style="padding:5px;"> .... </div> </div>
Unfortunately, there is no purely CSS way to achieve that (or at least I'm not aware of one).
I am assuming you don't want to add more elements and answer your question slightly differently.
The browser, not the style-sheet, determines the actual size of relative measurements such as em and %.
There is no common/standard mechanism to feed calculated data from the browser's internal layout engine back into a stylesheet (this could be a dangerous looping problem).
Truly, the only way to do this is to:
Use fixed width sizes and add pixel calculations into your style.
Use JavaScript or related framework to achieve the results.
I would simply add a div inside that div if possible.
<div id="outerwidth">
<div class="inner">
//Content
</div>
</div>
.outerwidth { width: 50%; }
.inner { padding: 20px; }
you could split the 50% value assigned to the width as this:
width: 46%;
margin: 0 1%; // 0 top/bottom and 1% each for left and right
padding: 0 1%; // same as above
you can recalculate the percentages to suit your needs, as long as the total is 50% you should be fine.
I would avoid using js to fix small cosmetic issues as this would not work with js off and would add extra workload to your client's browser - think of mobile and you will see why performance counts!
I often run in the following problem, I have a web page with the following divs:
header
sidebar
content
footer
sidebar and content are both float left with a break afterwards.
I want content to expand to the right edge of the browser, no matter how wide or narrow the browser width.
However, no matter what I try, I am face with two choices:
content must be a fixed width
content is not a fixed with (no width property) but resizing the browser pops the content down under the sidebar
The site I'm working on has many more divs than these four so it's hard to post CSS code that is not convoluted, but does anyone have a general strategy to enable content to expand out to the browser's right edge while never popping under sidebar if browser width is made too small?
My current solution is: table.
Addendum 1
Thanks Hristo, your solution works except that sidebar and content can't have fixed heights, which causes the footer to appear in the middle. Since you aren't using floats, how do you make the footer come after both of them?
You should be able to set a margin-left to the #content and position:absolute to the #sidebar.
For example:
<div id=wrap>
<div id=content>
...
</div>
<div> id=sidebar>
...
</div>
</div>
and some css
* {
margin: 0;
padding: 0;
}
#content {
margin-left: 200px;
background: green;
}
#sidebar {
width: 200px;
position: absolute;
top: 0;
left: 0;
background: pink;
}
and the example:
http://jsbin.com/umomuk
This is the same solution that google uses on their search result pages.
UPDATE
http://jsfiddle.net/UnsungHero97/ABFG2/10/
Check out the fiddle...
http://jsfiddle.net/UnsungHero97/ABFG2/2/
Let me know if you have any questions. I hope this helps.
Hristo
On solution will be to use the minimum width:
.containerDiv {
min-width: 600px;
}
if the div is greater than 600px it will just expand, and if the window is resized to a lower value the minimum width will be 600px. However, some versions of IE doesn't support this property, a different solution will have to be implemented for IE.
This link suggest a hack, but i have not tested that personally.
CSS play
Here's a question that's been haunting me for a year now. The root question is how do I set the size of an element relative to its parent so that it is inset by N pixels from every edge? Setting the width would be nice, but you don't know the width of the parent, and you want the elements to resize with the window. (You don't want to use percents because you need a specific number of pixels.)
Edit
I also need to prevent the content (or lack of content) from stretching or shrinking both elements. First answer I got was to use padding on the parent, which would work great. I want the parent to be exactly 25% wide, and exactly the same height as the browser client area, without the child being able to push it and get a scroll bar.
/Edit
I tried solving this problem using {top:Npx;left:Npx;bottom:Npx;right:Npx;} but it only works in certain browsers.
I could potentially write some javascript with jquery to fix all elements with every page resize, but I'm not real happy with that solution. (What if I want the top offset by 10px but the bottom only 5px? It gets complicated.)
What I'd like to know is either how to solve this in a cross-browser way, or some list of browsers which allow the easy CSS solution. Maybe someone out there has a trick that makes this easy.
The The CSS Box model might provide insight for you, but my guess is that you're not going to achieve pixel-perfect layout with CSS alone.
If I understand correctly, you want the parent to be 25% wide and exactly the height of the browser display area. Then you want the child to be 25% - 2n pixels wide and 100%-2n pixels in height with n pixels surrounding the child. No current CSS specification includes support these types of calculations (although IE5, IE6, and IE7 have non-standard support for CSS expressions and IE8 is dropping support for CSS expressions in IE8-standards mode).
You can force the parent to 100% of the browser area and 25% wide, but you cannot stretch the child's height to pixel perfection with this...
<style type="text/css">
html { height: 100%; }
body { font: normal 11px verdana; height: 100%; }
#one { background-color:gray; float:left; height:100%; padding:5px; width:25%; }
#two { height: 100%; background-color:pink;}
</style>
</head>
<body>
<div id="one">
<div id="two">
<p>content ... content ... content</p>
</div>
</div>
...but a horizontal scrollbar will appear. Also, if the content is squeezed, the parent background will not extend past 100%. This is perhaps the padding example you presented in the question itself.
You can achieve the illusion that you're seeking through images and additional divs, but CSS alone, I don't believe, can achieve pixel perfection with that height requirement in place.
If you are only concerned with horizontal spacing, then you can make all child block elements within a parent block element "inset" by a certain amount by giving the parent element padding. You can make a single child block element within a parent block element "inset" by giving the element margins. If you use the latter approach, you may need to set a border or slight padding on the parent element to prevent margin collapsing.
If you are concerned with vertical spacing as well, then you need to use positioning. The parent element needs to be positioned; if you don't want to move it anywhere, then use position: relative and don't bother setting top or left; it will remain where it is. Then you use absolute positioning on the child element, and set top, right, bottom and left relative to the edges of the parent element.
For example:
#outer {
width: 10em;
height: 10em;
background: red;
position: relative;
}
#inner {
background: white;
position: absolute;
top: 1em;
left: 1em;
right: 1em;
bottom: 1em;
}
If you want to avoid content from expanding the width of an element, then you should use the overflow property, for example, overflow: auto.
Simply apply some padding to the parent element, and no width on the child element. Assuming they're both display:block, that should work fine.
Or go the other way around: set the margin of the child-element.
Floatutorial is a great resource for stuff like this.
Try this:
.parent {padding:Npx; display:block;}
.child {width:100%; display:block;}
It should have an Npx space on all sides, stretching to fill the parent element.
EDIT:
Of course, on the parent, you could also use
{padding-top:Mpx; padding-bottom:Npx; padding-right:Xpx; padding-left:Ypx;}