I have a centered div (#content) on my responsive site that resizes to the browser window, like this:
<div id="container">
<div id="content">
<p>Here is some sample text.</p>
</div>
</div>
#container {
width: 100%;
}
#content {
max-width: 805px;
}
It works, except for when the stuff inside #content doesn't take up enough horizontal space to push the div's width out to the max-width I have set. For example, instead of being 805px, one of my pages with little content between the paragraph tags is 740px.
I have tried adding width: 100% to #content, but that stops the div from resizing.
What's the best way to fix this? Do I need to use a media query?
I found the answer. I did need width: 100%, but I also needed box-sizing: border-box, and then I needed to include the added width of my padding into the max-width, like so:
#content {
box-sizing: border-box;
width: 100%;
max-width: 885px;
padding: 40px;
}
Related
What I have seems to be a simple issue but I cant just wrap my head around it. I have googled around but all fixes for similar questions didn't help, which is why I'm asking for help here.
I am building a landing page with several sections stacked on each other. Each section is set to occupy the full height of the view port, and all except one is set to take up 100% width of the screen too.
However, when I reduce the screen height, the sections overlap each other. I have tried to set the overflow of each section to hidden, I still get the same behaviour. What I want is that each section be of fixed height as the browser height reduces and not get pushed into the upper section. Below is the snippet of my code.
body{
height: 100%;
width: 100%;
box-sizing: border-box;
}
.introd{
height: 100vh;
width: 100%;
padding: 3rem 4rem;
overflow: hidden;
}
<section class="introd">
<div class="introd_wrapper">
<h2 class="text-center">Introduction</h2>
<div class="contents">
some contents here
</div>
</div>
</section>
That's because of the padding of .section elements. To avoid the padding being added up to an element's width and height, set its box-sizing property to border-box like so:
.section{
height: 100vh;
width: 100%;
padding: 3rem 4rem;
box-sizing: border-box;
}
Also, you don't need to style the body just to make the elements stretch because each already has a width and height set.
so based of my structure I'm using, the header section is inside a wrap div. This wrap div has a set width
width: 1000px;
but I want my header to go past this 1000px width, I would like the header to be the entire width of the browser!
You can see the code in my jsfiddle: https://jsfiddle.net/7eLnegvd/
You might need to expand the width of the preview section so you can see the header doesn't fill 100% width.
Thanks!
Just remove width: 1000px; and by default the wrapper will be a block element which is the entire width of the page
why dont you change your way?
dont place you header tag in your wrapper div. use Semantic tags like header tag, main tag, footer tag and... outside div wrapper and style header tag separate LIKE A BOSS!
HTML:
<body>
<header>header</header>
<div class="wrapper">body</div>
<footer>footer</footer>
</body>
CSS:
*{
box-sizing: border-box;
text-align: center;
font-size: 30px;
color: white;
}
header,
footer{
width: 100%;
height: 100px;
background-color: black;
}
.wrapper{
width: 1024px;
height: 2000px;
background-color: gray;
}
If you want the width attribute of an element to be a maximum width you can use percentage instead of pixels. you can also add additional width attributes to your code and set the minimum or the maximum width that you want.
CSS example:
#wrap {
min-width: 5em;
max-width: 100%;
}
In addition, It's recommended to use CSS3 #media Rule for such type of design to make it more responsive.
I am trying to create a widget sidebar and I am encountering problems with the displayed image. The sidebar has a padding of 20px from all sides and the image's width is set to auto. However, when I display the images, it goes over the padding of the container instead of making its size adjusted to the padding. Here is the code (CSS):
aside {
top: 0px;
height: 100%;
display: block;
position: fixed;
width: 30%;
background: #f9f9f9;
padding: 20px;
border-left: 1px solid #e3e3e3;
}
img {
border: 0;
width: auto;
max-width: 100%;
height: auto;
}
*, *::before, *::after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
HTML:
<aside>
<div class="widget">
<img src="/disk.png">
</div>
<aside>
The widget class has no style, as I haven't implemented it due to this problem. Here is the screenshot: http://imgur.com/Gw1E0lg (thats where the container ends). How can I fix this issue? How can I make the image's width to be 20px less automatically, so it aligns with the CSS rules of the parent?
I found the answer myself. When using fixed CSS position without the right attribute, at least in safari and chrome, the block would align against the parent container's width. So, if the block is:
<nav style="position:fixed;left:0px;width:80px;">
</nav>
<main style="margin-left:80px;padding:10px;position:relative">
<div class="content" style="width:80%">
</div>
<aside style="width:20%;position:fixed;top:0px">
<div class="widget">
<img src="/disk.png">
</div>
<aside>
</main>
The aside would look like a right sidebar that fits the main element. But since the fixed position's width is relative the window, not the parent, its right position would basically start from off the screen, and the "20%" would be 20% to the parent, ignoring the other width. I don't know why safari and chrome render it this way, but because of that and the unluckiness of image size being 10px smaller than the aside element, I couldn't figure out how this problem is even possible.
So, to get what I wanted, I change the asides position to absolute and added overflow-y:scroll to my content class as the right bar should never move. Yes, I could play with width of the right bar but in my project that's the least of my concerns right now
I'm working on a website that fits perfectly in the browser window. Below is a basic blueprint of the website layout:
So far, the Red area is just display:block. The Green area is also display:block with margin-right:200px. The Blue areas(nested in a div) is float:right.
So I've got the width sorted. It's the height I need advice on. The Red and Dark Blue areas are a set height, but I need the Green and Light Blue areas to fit the height of the browser window view.
I'm trying to use box-sizing, but it exceeds the height of the window view because it's extending to the max height of the window. Sorry for my poor explanation. Any advice if would be excellent. Thank you!
For green div set height: calc(100%-{red-div-height}); and for the light blue div set height: calc(100%-{dark-blue-div-height}-{red-div-height});
This is kinda the legacy version of C-Link's answer.
jsFiddle and fullscreen
This has the limitation of any content falling below one page-full falling outside of its container (you can see if you scroll down in the fiddle, but not on the fullscreen).
Make sure our page stretches to its full height.
body, html { height: 100%; width: 100%; margin: 0; padding: 0;}
Set a static-height header.
header {
height: 101px;
background: red;
}
Create a box for everything under the header. You were on the right track with the box-sizing. We can add padding to it, in the same amount as our header. Then percentages inside it work nicely.
.content {
position: absolute;
box-sizing: border-box;
padding-top: 111px;
padding-bottom: 10px;
top: 0; left: 0;
height: 100%; width: 100%;
}
We float our aside (may or may not be the correct element, depending on contents) and set some styles on it.
aside {
float: right;
width: 20%;
height: 100%;
padding-bottom: 111px;
box-sizing: border-box;
}
.top {
height: 100px;
background: blue;
}
.bottom {
margin-top: 10px;
height: 100%;
background: skyblue;
}
This is our main, large, content area, which we float to the left. The width could be specified exactly if we wanted exact padding at the cost of additional HTML.
[role="main"] {
width: 78%;
background: limegreen;
height: 100%;
float: left;
box-sizing: border-box;
}
You can also set overflow-y: auto on our main or aside elements, to have them scroll when they run out of space. There should also be mobile styles for this page that remove the floating, absolute positioning, absolute styling, and widths should be nearly 100%.
you can always set the green box height to the window height minus the red box height.
accordingly the light box height to the window height minus the (red box height + the dark blue box height)
Edit 1: I haven't mentioned that has to be done with javascript.
Edit 2: Consider any paddings and margins too.
Could you not just give the divs a max or min height depending on their purpose?
I use a main container or wrapper div that the others would be contained in, that div is then my effective page or screen area.
<div id="wrapper">
<div id="content">
<div id="sidebar">
</div>
</div>
</div>
#wrapper{
min-height: Whatever value you want here;
max-height: Whatever value you want here;
}
It might be a good idea to set up your page using main container divs, hot only for the content but for the header and footer as well.
As an example, I have a main wrapper that is the whole page, within that is the header div, the content div, the nav div and the footer div. These are the main ones. Everything else can then be contained within them.
So, you can set the layout out using percentages so you have a fluid design that'll react to each browser size. The other elements will then 'fit' inside the main divs and be constrained to them. You may need to look into positioning etc but this is certainly the direction you should head towards.
<div id="wrapper">
<div id="header">Header Here including any divs to be contained within this space</div>
<div id="content">All content etc here</div>
<div id="nav">This is your sidebar</div>
<div id="footer">Footer, as per header</div>
</div>
Then use the css to re deisgn the above layout focusing only on those main divs. Use % instead of px to maintain fluidity.
#wrapper{
width: 100%;
height: 100%
}
#header{
width: 100%;
height: 20%
}
#content{
width: 70%;
height: 60%;
float:left;
}
#nav{
width: 30%;
height: 60%;
float:left;
}
#footer{
width: 100%;
height: 20%
}
A pretty common trick is to give the green (and light blue) box absolute positioning, a padding AND a negative margin. Because 100% width is relative to the containing box (could be a parent div, or just the window itself) this is not suitable. When the header was a relative height, say 10%, it would've been easy. The padding makes sure the content will not disappear behind the header, the negative margin puts the box back in place. Don't forget the z-index (otherwise the content (green part) will overlap the header).
The css looks like this:
.header { position: absolute; width: 100%; height: 100px; background: red; z-index: 1; }
.content { position: absolute; width: 100%; height: 100%; padding: 100px 0 0; margin-top: -100px; background: green; z-index: 0; }
The fiddle looks like this: http://jsfiddle.net/2L7VU/
I'm trying to get a simple solution for this layout.
This is the simplified html.
<div class='wrapper'>
<div class='header'></div>
<div class='middle'> TEXT </div>
<div class='footer'></div>
</div>
Header and footer have a fixed height in pixels.
middle can have a variable height, depending on the content.
I want wrapper to have a minimum height of 100%. So if the text inside middle is small, the middle div should expand to fill the browser page. And if it's too long, the whole page should be scrollable.
Is this possible easily? Maybe changing something in the layout?
here's your solution: http://jsfiddle.net/S4akv/1/
You do NOT want to set a hard height for the .middle. If your content is only a few lines then you will end up with scrollbars where none are needed.
With a header and footer, you also don't want height: 100% on your .middle class because it will push your footer down, forcing a scrollbar no matter what. You also don't want a clear-cut height:100% because most browsers will interpret this as 100% of the browser height, so when you resize your browser to be larger, either the height won't change or the footer won't move.
The best solution here is to have your wrapper and any associating backgrounds attached to that. Depending on the content within your .middle div this answer could change, but given the simple parameters this is the most elegant way to do it.
the secret is to make sure that all containing elements have a height set. reason being, any block element with height: 100% will only be 100% of the area containing it. in this case you need to set height for middle, wrapper and body, html
body,html { height: 100%; margin:0; padding:0; }
.wrapper { min-height: 100%; width: 100%; background-color: red; position:relative; padding-bottom: 200px; }
.header { height: 200px; width: 100%; background-color: blue; }
.middle { }
.footer { height: 200px; width: 100%; background-color: green; position:absolute; bottom: 0; }
If you have nested content within .middle that also needs to be 100% height there is a better way, using a combination of height, absolute positioning and negative margins. There are a million ways to skin a cat. Well, a handful at least :)
edited to add padding to .wrapper to make room for footer. The bottom padding of wrapper must be the same height as the footer