I am trying to make it so that the content box (Div) will automatically re-size when the browser width is changed.
The sidebar has a set width.
index.html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="Wrapper">
<div id="header">
Stuff
</div>
<div id="sidebar">
Text<br/>Sidebar
</div>
<div id="content">
Stuff<br/>text<br/>Just to fill some space
</div>
<div id="footer">
Stuff
</div>
</div>
</body>
</html>
style.css:
#wrapper{
width:90%;
}
#header{
width:100%;
height:50px;
background-color:lightblue;
}
#content{
/* *** I want something that will change width to fill blank space when the user re-sizes the browser and the sidebar moves *** */
margin-top:4px;
background-color:yellow;
}
#sidebar{
width:100px;
float:right;
margin-top:4px;
background-color:pink;
}
#footer{
width:100%;
height:40px;
margin-top:4px;
background-color:red;
}
Note that this is just code I wrote while writing this question. All I done was missed out extra code that is irrelevant to the question.
This should (Not tested) show a header at the top, and a footer at the bottom.
The part that I need help with is the middle section.
When the browser width gets changed (Smaller of bigger), the sidebar will stay to the right.
I want the "#content" box to automatically re-size so that there is a gap in between the "#content" box and the "#footer" box.
I have tried css width % values but that doesn't work.
Can css do this?
If not, can I get any php or javascript that can do that?
Fiddle : http://jsfiddle.net/logintomyk/fQPse/
HTML (that you need to ammend) :
<div id="content">
<p> <!-- add a paragrap -->
Stuff<br/>text<br/>Just to fill some space
</p>
</div>
CSS (that you need to ammend) :
#content >p {margin-right:100px;margin-top:0px}
add overflow: hidden to #content. this makes it use the "rest" of the width, browser-width minus 100px for the sidebar.
if you want to have an extra gab between the sidebar and your actual content, add the following to #content:
box-sizing: border-box;
padding-right: 20px; /* (or whatever)*/
fiddle: http://jsfiddle.net/urEbY/1/
Related
The issue is when i added the sidebar of width 230px and add the margin left to body 230px then in this case instead of the body width shrink the content move out of the screen. here is the scenario.
<body style="margin-left:230px;">
<aside style="position:absolute;left:0;width:230px;">content here
</aisde>
<header>
</header>
<section>
</section>
<section>
</section>
</body>
In this case the body content shrink but the content move outside from the body
Hello First you balise didn't close try to correct that first .
Then using margin left is not the best solutions in every case
For example, an alternative to margin-top:20px; margin-left:20px; would be:
<div id="outer">
<div id="inner">
</div>
</div>
<style>
#outer { position:relative; }
#inner { position:absolute; top:20px; left:20px; }
</style>
and why did you use position absolute ? use position:relative
As simple as it must be, there doesn't appear to be anything at this site that addresses this exactly as shown.
I've tried everything I can image, without satisfaction. Likewise, I'm disappointed with all the extra code that finds its way into my page when I adapt methods designed for slightly different scenarios.
This is essentially what I want to achieve:
full-screen and resized screen responsive layouts http://q-beans.ca/header/headerSKETCH2.png
Please note in (2), the resized version, that the header background increases in height to accommodate the floated blue div. The logo is unchanged in size. Only the rightmost, blue div decreases in width after the screen gets below 660px.
In my attempts, the centered content below the header remains centered as it should. The header, however, has not been willing to cooperate. Surely there is a concise, valid way to code the header without javascript that covers what I've been missing.
Demo goes here: Fiddle Demo
HTML
<div class="page-content">
<header>
<div class="header-content">
<div class="logo">LOGO HERE</div>
<div class="content">HEADER CONTENT HERE</div>
</div>
</header>
</div>
CSS
header {width:100%;background-color:gray;padding:20px 0;}
header .header-content {width:880px;margin:0px auto;}
header .logo {float:left;width:220px;height:50px;background-color:lightgreen;}
header .content {margin-left:220px;height:50px;background-color:cyan;}
#media screen and (max-width:900px) {
header .header-content {width:auto;margin:10px auto;min-width:340px;}
header .logo {float:none;margin:10px auto;}
header .content {margin:10px;width:auto;}
}
Say What???
By floating the fixed-width logo to the left, and setting that width as the main content's fixed margin-left value, we get the header content element to be responsive, and basically take over the [headerWidth - logoWidth] leftover :-)
First off the header should have no set height. that way when the elements stack the header will expand. second, in your media query, set the blue and green element to width:100%. that way they will stack.
the width you should define in PX is your container element, the one that has margin 0 auto with an 800px width. In your media query just make that width 320px. that way green and blue elements will expand 100 percent to width 320px.
get it? got it? good
DEMO: http://jsfiddle.net/kougiland/dx38K/1/
<section>
<div>left</div>
<div>right</div>
</section>
The css
#media screen and (max-width:600px) {
body { background:red; }
}
#media screen and (max-width:340px) {
body { background:black; }
section div {display: block;
clear: both;
margin: 0 auto;
float: none!important;}
}
*{
-webkit-box-sizing:border-box;
}
section{
text-align:center;
color:white;
width:100%;
max-width:880px;
margin:0 auto;
}
section div {
float: left;
padding:20px;
}
section div:nth-child(1){
width:30%;
max-width:220px;
height:60px;
background:red;
}
section div:nth-child(2){
width:70%;
max-width:660px;
height:60px;
background:green;
}
DEMO: http://jsfiddle.net/kougiland/dx38K/1/
UPDATE: PLEASE NOTE THAT YOU HAVE TO RESIZE THE JSFIDDLE RUNVIEW TO SEE IT IN ACTION
I assume that you have done all the coding related to the page, making all the divisions and other stuff.
Now, for the header to resize itself when the browser size goes below a certain threshold(by resizing the browser or simply using ipad or iphone,etc):
In your page,
In the head section, add:(generally, a good practice for a responsive site)
<meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="_css/screen_styles.css" /><!-- for general styling of divisions-->
<link rel="stylesheet" type="text/css" href="_css/screen_layout_large.css" /><!-- for large normal screen sizes-->
<link rel="stylesheet" type="text/css" media="only screen and (min-width:501px) and (max-width:800px)" href="_css/screen_layout_medium.css" /><!-- for devices like ipad and other tabs -->
<link rel="stylesheet" type="text/css" media="only screen and (min-width:50px) and (max-width:500px)" href="_css/screen_layout_small.css" /><!-- for devices like phones -->
First of all, lets say for your large screen, i.e. screen_layout_large.css
.header{
height: 80px;/*let's say that the height of the header and container, both are themselves 80px*/
......
}
.logo{
display:block;
float:left;
position:absolute;
width:220px;
height:80px;/* <= header height :whatever you want it to be*/
}
.content{/*the right part of the header*/
max-width:660px;
float:right;
height: 80px;
}
Then, let's say your screen size goes down to 350px,
it will automatically use the screen_layout_small.css
in which you have:
.header{
height: 135px;/*( >= (.logo height) + (.content height)) : see below*/
....
}
.logo{
display:block;
float:left;
position:absolute;
width:220px;
height:60px;/*because you might want to reduce the size of your logo for smaller screens*/
}
.content{
min-width:320px;
float:right;
height: 75px;/* same reason again*/
}
Any further help or clarification required, please leave a comment.
Ok, let me try one new thing to see if we are on the same page.
In your page, I think you already have divs like these:
<div class="header">
<div class="container">
<div class="logo">
</div>
<div class="content">
</div>
</div>
</div>
Now, whatever you want to extend in height to accomodate the floated blue div, in this case, the header for that matter.
Modify the structure of the code like this:
<div class="header">
<div class="container">
<div class="logo">
</div>
<div class="content">
</div>
<div class="clearfix">
</div>
</div>
<div class="clearfix">
</div>
</div>
Now, in your screen_styles.css or main.css(wherever you do all the styling):
.clearfix{
clear:both;
line-height:1px;
}
What it does is, the outermost page container extends down to encompass that div. Since that div appears after both of the individual divs of logo and content and itself doesn't have a float, the outermost page container is forced to increase its height to encompass that element.
Is that what you were looking for?
I creating an new layout for a personal website.
I'm using Twitter Bootstrap 3, and my initial layout was made using as exemple
the "Bootstrap with sticky footer" sample (http://getbootstrap.com/examples/sticky-footer-navbar/)
This is my html:
<body>
<!-- Wrap all page content here -->
<div id="wrap">
<!-- Begin page navigation -->
<nav id="nav-container" class="navbar navbar-default container" role="navigation">
<div class="container">
<!-- Here I put a very normal Bootstrap 3 navbar -->
</div>
</nav>
<!-- Begin page content -->
<div id="main-container" class="container">
<!-- All my content goes here! -->
</div>
</div>
<!-- Begin page footer -->
<footer id="footer" class="container">
<div class="container">
</div>
</footer>
</body>
The Sticky Footer CSS:
html, body {
height: 100%;
/* The html and body elements cannot have any padding or margin. */
}
/* Wrapper for page content to push down footer */
#wrap {
min-height: 100%;
height: auto;
/* Negative indent footer by its height */
margin: 0 auto -100px;
/* Pad bottom by footer height */
padding: 0 0 100px;
}
/* Set the fixed height of the footer here */
#footer {
height: 100px;
}
And the custom style for my layout:
body {
/* Body's background will be grey */
background-color: #C0C0C0;
}
#main-container {
/* A box where I'll put the content will be white */
background-color: #FFFFFF;
}
#wrap {
height: 100%;
min-height: 100%;
}
#main-container {
min-height: 100%;
height: 100%;
}
This code generate this layout:
But, as you can see, the div #main-container don't grow 'till the end of the layout.
The div keep with the height of his content.
What I want is that this div always fills the entire page, like this:
Many solutions on internet said me to fix min-height to some tested value, but this way
I'll not be able to keep my website responsive (it's very important to me keep my layout
always responsive, that's the main reason I use Bootstrap 3).
Other solution goes to calculate the div height with javascript. Personally I don't like
this solution. I whish I could solve this only by using CSS.
Someone knows how to solve this problem?
As long as you are working on percentage, your site will be responsive. So using
min-height:100% does solve your problem which is just CSS. And if you don't want Javascript involved here, that is the way to go.
See the JS Fiddle DEMO. Your container is filling the entire page.
#main-container {
min-height: 100%;
background: #fff;
}
If you want to have sticky footer AND fullheight #main-container, you have to modify your structure. First, let me explain why you can't solve this with the sticky-footer method you're using right now:
Setting #main-container's height:100% or min-height:100% won't work because you can't use percentage height with a parent whose height is not strictly defined. Note that in the currently accepted answer this is considered a bug but it is not, it's just the way it is supposed to work. In your example #wrap's height is set to auto, so #main-container height just ignores the 100% and fallsback to auto.
To have both sticky footer and REAL fullheight #main-container (instead of faking with background) you have to use display:table and display:table-row. This works because when you use display:table, height:100% works just as your regular min-height:100% and the display:table-rows inside will always stretch to use all the vertical space available.
NOTE: this is different from using html tables, because in this case you don't need to bloat your markup with non-semantic tags, as you'll see in the following example.
Here's the example HTML code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="maincontainer" class="astable">
<div id="header" class="astablerow">
header
</div>
<div id="middlecontainer" class="astablerow">
content
</div>
<div id="footer" class="astablerow">
footer
</div>
</div>
</body>
</html>
And here's the CSS
html, body{
margin:0;
padding:0;
height:100%;
}
.astable{
display:table;
height:100%;
table-layout:fixed;
width:100%;
}
.astablerow{
display: table-row;
}
#header{
height:30px;
background-color:#00ff00;
}
#footer{
height:30px;
background-color:#0000ff;
}
#middlecontainer{
background-color:#ff0000;
}
I think that min-height doesn't work due to a reported bug. See this: stackoverflow.com/questions/8468066.
An easy way to create the illusion that #main-container grows till the end, is to set #wrap's background-color the same value as #main-container's.
I want to make a simple two column layout, where the right column is out of the container but still makes the container height expand.By using position:absolute it goes were it should but dosent expand.
This is the html code
// Note: I dont add the head tag to save space in here :)
<html>
<body>
<div id="container">
<div id="left">
</div>
<div id="right">
</div>
</div>
</body>
</html>
And the css code
#container {
width:900px;
margin:0 auto;
}
#left {
width:700px;
float:left;}
#right{
width:230px;
margin-left:760px;
position:absolute;
}
I cant use float:right, because it will floated to the right of the container. Maybe the structure has to be different I dont know.
Try setting a position: relative on #right, and giving it a margin-left greater than the width of the container: http://jsfiddle.net/8MEqL/
I want to have a full header, while a fixed width of the content in the center of the page. Here's my code:
HTML:
<body>
<div class="header">
<div class="wrap">Header</div>
</div>
<div class="content">
content
</div>
</body>
CSS:
.header{
background:yellow;
}
.wrap, .content{
border:1px solid red;
margin:0 auto;
width:500px;
}
I've used .wrap inside the .header so that the content in the header also has same width as the .content.
Problem:
The layout looks fine, however the problem starts when the width of the browser window gets less than the width of the wrap (ie. 500px). In that case when we scroll the page towards the right side, some part of header background goes missing.
JSFiddle:
Here you can see the jsfiddle (http://jsfiddle.net/QS3nS/1/). You can see the problem if you decrease the browser width so that it the width of output window becomes less than 500px.
Set a min width on the header
.header{
background:yellow;
min-width: 500px;
}