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.
Related
I am having some trouble understanding why my relative div (.wrap) will not display its css defined background color or image. The body has its own background with the .wrap creating a new one for the div and its contents. (.local is the absolute div I am trying to have .wrap create a background for, as it is one of the many divs I need to have a single shared background from .wrap)
Any help will be greatly appriciated!
CSS
body{
min-height: 100%;
min-width:100%;
font-family: 'Open Sans', sans-serif;
background-color: gray;
}
.wrap {
position: relative;
height: 100%;
width: 70%;
background-color: white;
left: 15%;
}
.local {
position: absolute;
height: 40%;
width: 20%;
}
HTML
<!-- MAIN BODY -->
<div class="wrap">
<!-- LOCAL WEATHER -->
<div class="local">
<p>THIS IS A TEST PARAGRAPH TO SHOW THE RELATIVE DIV ISSUE</p>
<!-- <img src="images/weatherphoto.png"> -->
</div>
</div>
When you absolutely position .local, it takes it out of the flow. With it out of the flow, there is nothing inside .wrap so it collapses to a height of 0. Since .wrap has a height of 0, and .local is out of the flow, body has nothing inside it, so it too collapses to a height of 0.
Using a percentage sets the height of the element to be a percentage of its containing element. If everything is collapsed, there is nothing to be a percentage of.
If you want body to occupy the height of the whole screen, perhaps consider using the vh value which is calculated based on the viewport height.
I beleive updating your body style to:
body{
height: 100vh;
min-width:100%;
font-family: 'Open Sans', sans-serif;
background-color: gray;
}
will give you the outcome you were expecting, because it defines the height of the body as something that is relative to the viewport, which in turn gives .local something to be a percentage of.
Your problem is that your wrap class (in addition to your local class actually occupies no height. You specify a min-height: 100% in your body, but as body has no parent with a fixed height, that won't do actually ever do anything ;)
What you're actually looking for is height: 100vh on body to make sure it occupies 100% of the height of the page. An example of that can be found here.
However, what I would recommend is to instead set the height in the wrap class.
.wrap {
position: relative;
height: 300px;
width: 70%;
background-color: white;
left: 15%;
}
This will bring up the second background colour, as expected :)
I've created a fiddle showcasing this here.
Hope this helps!
My header doesn't appear anywhere. I would like to know how to fix it.
body {
background-color: antiquewhite;
font-size: 100%;
width: 100%;
height: auto;
}
nav {
height: 8%;
width: 100%;
position: fixed;
display: block;
background-color: grey;
z-index: 1000;
}
header {
width: 100%;
background-image: url("https://placehold.it/50/50");
}
<nav>
<h1>...</h1>
</nav>
<header>
</header>
This would do the trick:
html, body {height:100%;}
if you use percentage for height the parent needs to have a fixed height (so actually it's 8% of something) or at least ALL parents till html tag need to have a percentage height.
The header tag has no contents, and therefore 0 height. Try adding some text inside the header tags or add a height with css.
My first thought would be give that header element some (html-)content (like text) or specify a height explicitly as of my experience container elements are not "shown" when their boundaries are not declared in any way.
Otherwise you may have a look here as this seems to be the same problem basically to me.
If you are using e.g. Firefox, you can use rightclick->inspect element to see if the element is simply not rendered (i.e. because of no height) or otherwise trace the applied css, manipulate css in place (non permanent) or even debug javascript.
Hope this helps.
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;
}
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