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
Related
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/
I'm making a website using Bootstrap and Wordpress. It's a 2-column layout - left sidebar, right content. The right content is dynamic and expands by infinite scroll. I've tried to make the left sidebar 100% height through several techniques but to no avail.
I'd like the sidebar to continue down according to the size of the viewport/height of the right content div.
I've made a bare fiddle: http://jsfiddle.net/ydPMr/3 but it would be better if you saw what I was talking about on my dev page: http://joshuawalker.koding.com.
Here is the basic structure of my page:
<div class="navbar navbar-inverse navbar-static-top">
<div class="navbar-inner"></div>
</div>
<div class="wire-unit hero-fix">
</div>
<div class="sidebar hidden-phone"></div>
<div class="content"></div>
If anyone has any ideas on how to make the sidebar to stretch full height, I would appreciate it.
Thanks!
This is working fine for me. Fiddle
I set the min-Height to 500px. If you don't want minimum, remove it. It will work according to the height of your content in the content div. Like this Fiddle
<div class="wrapper">
<div class="sidebar hidden-phone">
</div>
<div class="content">
</div>
</div>
and style
<style type="text/css" >
.wrapper
{
min-height:100%;
width:100%;
position:relative;
background-color:Black;
display:inline-block;
}
.sidebar
{
width:20%;
top:0px;
left:0px;
bottom:0px;
position:absolute;
background-color:Aqua;
}
.content
{
min-height:500px;
width:80%;
position:relative;
background-color:Gray;
float:right;
}
</style>
im facing a problem where i need some advice.
I want to have a couple of main div containers lets say
<div class="main">
one to another to the right.
All main containers should have full width and height (fullscreen).
On the right I need a couple other main containers with the size and width of the former.
Is it possible to set the divs one another to the right without reading and setting it with javascript? Is there a css/html solution?
Example:
<div class="main"><!--to the right one more -->
</div>
<div class="main"><!--to the right one more -->
</div>
<div class="main">
</div>
Style: #This doesn't work...
.main{
width:100%;
height:auto;
float: right;
}
I may have misunderstood the question, but try
html, body {
height: 100%;
}
body {
width: 300%;
}
.main {
height: 100%;
width: 33.333333333%;
float: left;
}
http://jsfiddle.net/3yaJZ/
hope what i've understood is what your trying to tell.. from my understanding,you want 3 div's ( main ) that will be in one bit component ( container ) each of which is 100% width and you can check each div as you scroll horizontally....
In your Css
body{
width:300%;
height:100%;
}
.main{
width:100%;
height:100%;
float:left;
}
And your html --
<body>
<div class="main"><!--to the right one more -->
</div>
<div class="main"><!--to the right one more -->
</div>
<div class="main">
</div>
</body>
I am using php to dynamically create webpages. As such I have things more objectified. My generic page creates a header, a mainbody and a footer. The content is the placed inside of my mainbody.
Mainbody has a min-height of 600px.
A div inside of mainbody for one page acts as a menu on the left side of mainbody. I want this div to be 100% of the height of the mainbody.
The div (menu) is floating left, and the rest of the mainbody content is generated dynamically by the php.
What doesn't Work:
height:100%; (It just ends up being the height of the content I have inside the menu, not the height of the mainbody)
min-height:600px; (It just stays 600px, even when mainbody gets larger)
Haven't played with it enough, but position absolute, absurdly large height, and a negative z index, and mainbody overflow...not successful with the little bit I tried.
Any ideas? I'm totally open to doing any kind of weird manipulation, so long as it looks natural.
Here's example code: jsfiddle.net/TButx
http://jsfiddle.net/TButx/56/
The solution is to pad the bottom of the column and hide overflow.
#html{width:400px; height:100%; margin-left:auto; margin-right:auto; background-color:yellow;}
#mainbody {min-height:300px; height:100%; overflow: hidden;}
#menu {width:100px; height:inherit; background-color:blue; float:left; padding-bottom: 700px;margin-bottom: -700px;}
#content {height:100%; width:300px; background-color:red; float:right; padding-bottom: 500px;margin-bottom: -500px;}
#clear {clear: both;}
<div id="html">
<div id="mainbody">
<div id="menu"></div>
<div id="content"></div>
<div id="clear"></div>
</div>
</div>
There must be an error in your code. As you describe it, everything should work.
Like here: http://jsfiddle.net/VxSA3/
HTML:
<div id="Mainbody">
<div id="menu">menu content</div>
<p>some text in the main-body</p>
</div>
CSS:
#Mainbody{height:600px;outline:1px solid green;}
#menu{height:100%;outline:2px solid red;float:left;width:100px;}
A common problem with this is that your main body div isn't wrapping around your floating elements. You have to have a div in it with clear:both and the body div will stretch.
As an alternative method, you can use absolute position to control the stretch of the menu div.
For the main body div:
position:relative;
For the left floated div (no longer left floated in this case):
position:absolute;
left:0px;
bottom:0px;
top:0px;
width:...
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/