I have this code:
http://jsfiddle.net/4axkLm9a/
I want the sidebar to appear on the right side of the main content which should stay centered on the page.
I'm trying to design this page so that the main content will be centered on the page, and a sidebar where I can display a vertical banner ad.
Can someone help please? :)
thanks.
Here's the HTML:
<div id="header">
<div id="main">
<div id="inner">
</div>
</div>
<div id="sidebar"></div>
</div>
<div id="footer"></div>
And the CSS:
body {
margin:0;
height:100%;
}
#header{
background-color:#f0f0f5;
padding-right:10px;
padding-left:10px;
font-family:Arial,
sans-serif;
font-size:14px
}
#main {
padding-bottom:20px;
margin:0 auto;
max-width:784px;
height:100%;
}
#inner {
border:1px solid #c9c9c9;
padding:20px 20px;
color:#44423c;
background-color:#fff
}
#sidebar {
width:200px;
}
#footer {
background-color:#d3d3d3;
padding-bottom:18px;
padding-top:18px;
margin:0 auto;
max-width:1030px
font:normal 14px/1em Arial, sans-serif;
color:#727272;
text-align:center;
clear: both;
}
Add these to your code. Example Fiddle
#sidebar {
float: right;
}
#inner {
float: left;
width: 584px;
}
Additionally, you should change your code to use semantic html, such as:
<header>
</header>
<main>
<article>
</article>
<aside>
</aside>
</main>
<footer>
</footer>
Also you need to end your #header div before you start the #main div.
Header
<div id="header">Header</div>
<div id="main">
<div id="inner">
Inner Content
</div>
<div id="sidebar">
Sidebar Content
</div>
</div>
<div id="footer">Copyright Website Blah Blah </div>
You can use the position: fixed
On your #sidebar id add:
position: fixed;
right: 0px;
top: 50%;
Fiddle Solution
Related
I'm trying to figure out how to create a fluid layout with a fixed width sidebar and fluid content area using Jeet.
HTML:
<div class="wrapper">
<div class="sidebar"></div>
<div class="content"></div>
</div>
CSS:
.wrapper {
width: 100%;
}
.sidebar {
width: 240px;
}
Looks like it is not possible with Jeet to set the content css to take rest of the layout, is it so?
You have to use define content width
HTML CODE
<div class="wrapper">
<div class="sidebar">
<div class="content-box">
Content Here !!!!
</div>
</div>
<div class="content">
<div class="content-box">
Content Here !!!!
</div>
</div>
</div>
CSS CODE
.wrapper {
color: #fff;
}
.sidebar {
width:30%;
display:inline-block;
float: right;
background: #333;
}
.content {
width: 70%;
display: inline-block;
background: #666;
}
.content-box {
padding: 20px;
}
Please check Demo Here https://jsfiddle.net/568447zu/
I would like to put the footer at the bottom of the browser window and fill the empty part with the container when necessary(. This is my structure:
<header>
<div class='container'>
....
</div>
</header>
<div id='wrap'>
<div class='container'>
<div class='white-background'>
<div class='col-xs-12 col-sm-5 leftcontent'>[%leftcontent%]</div>
<div class='col-xs-12 col-sm-7 maincontent'>[%maincontent%]</div>
</div>
</div>
</div>
<footer>
<div class='container'>
<div style='text-align: center; padding-bottom: 20px;'><h3>[%copyright%]</h3></div>
</div>
</footer>
And this is the css:
#wrap {
min-height: 100%;
background-image:url('bk.gif');
background-color: #2c3e50;
}
.white-background{
width:100%;
height:100%;
display:block;
overflow:auto;
background-color: #fff!important;
}
footer{
background-color: #f2f2f2;
text-align:center;
position: relative;
margin-top: -50px;
height: 50px;
clear:both;
padding-top:20px;
}
I have done some tries and took a look to other answers, but without success...
Try add first stycky footer solution
http://ryanfait.com/html5-sticky-footer/
I have an issue with the following CSS. The votes I wan't to be in the same height as the Title. Although it looks like the Votes is on the same div as tags and by div. So that the 3 items to the left looks shrunken. I am quite new to it so I fail to see what I have done wrong. I had it working before I changed the height from 54 to 60 pixels, but I assume that there is something else I have added as well.
#containerpostsmall {
width: 800px;
height:60px;
}
.votes {
height:60px;
width:100px;
float: left;
}
.number {
height:40px;
text-align: center;
}
.number-text {
height:20px;
text-align: center;
}
.texttags {
width:500px;
height:60px;
float: left;
}
.title {
height:40px;
width:500px;
font-size:32px;
overflow: hidden;
white-space: nowrap;
}
.tagsby {
height:20px;
width:500px;
float: left;
}
.tags {
float: left;
}
.by {
float: right;
}
I have the following code part:
<div id="containerpostsmall">
<div class="votes">
<div class="number">
<h1>6</h1>
</div>
<div class="number-text">
votes
</div>
</div>
<div class="votes">
<div class="number">
<h1>1</h1>
</div>
<div class="number-text">
answers
</div>
</div>
<div class="votes">
<div class="number">
<h1>4</h1>
</div>
<div class="number-text">
comments
</div>
</div>
<div class="texttags">
<div class="title">
We were very tired.
</div>
<div class="tagsby">
<div class="tags">
<span style="background-color: #ffffff; border-color: #000000;">Forest</span>
<span style="background-color: #ffffff; border-color: #000000;">Ocean</span>
</div>
<div class="by">
Peter |
2013-12-03 18:56:34
</div>
</div>
</div>
</div>
It looks to me like a default h1 formatting issue. Browsers are going to apply default styling to certain elements.
I set
h1{
margin: 0;
}
See fiddle: http://jsfiddle.net/kZLub/
Any idea how to achieve the layout indicated in the image below with pure CSS, if the order of the divs in the markup must be as follows?
NOTE - The height of each panel is unknown; wrapper divs may be added to the markup
<body>
<div id="content"></div>
<div id="nav"></div>
<div id="search-results"></div>
</body>
This technique is taken from the question
Make a div display under another using CSS in a totally fluid layout.
It uses CSS table presentation using properties of display: table family to rearrange the presentation order of dom elements.
As said in the above question:
This works in all modern browsers, and IE8 if you're careful. It does
not work in IE6/7.
HTML
<div id="wrapper">
<div id="content-wrapper">
<div id="content">content</div>
</div>
<div id="nav-search-block">
<div id="nav-wrapper">
<div id="nav">nav</div>
</div>
<div id="search-results-wrapper">
<div id="search-results">search-results</div>
</div>
</div>
</div>
CSS
#wrapper {
display: table;
width: 100%;
}
#nav-wrapper,
#search-results-wrapper {
float: left;
width: 50%;
}
#nav,
#search-results {
color: #ffffff;
background: #6699ff;
padding: 10px;
margin: 10px;
}
#nav-search-block {
display: table-row-group;
}
#content-wrapper {
display: table-footer-group;
}
#content {
color: #ffffff;
background: #cc0000;
padding: 10px;
margin: 10px;
}
Demo
Now you can do this in javascript
as like this
Javascript
document.getElementById('one').innerHTML=document.getElementById('content').innerHTML;
CSS
#content{
display:none;
}
#one{
background:red;
padding:10px;
clear:both;
}
#nav{
background:green;
float:left;
width:35%;
}
#search-results{
float:right;
width:65%;
background:yellow;
}
HTML
<body>
<div id="content">Content I m first in html </div>
<div id="nav">navi</div>
<div id="search-results">Search-Results</div>
<div id="one"></div>
</body>
Live Demo
I am new to web design using tableless and I'm having problem positioning some elements on my page..
Here's the sample html: http://christianruado.comuf.com/sample.html alt text http://christianruado.comuf.com/images/screen.jpg
As you can see from the screen shots I want my right div to be vertically stretched down to the same level of my footer and position my bottom element to the lowest part of the right container.
CSS:
.container {
width:88%;
}
#header {
background:#CCCCCC;
margin-bottom:5px;
padding-bottom:2px;
height:100px;
text-align:center;
}
#content {
background: #0099CC;
margin-bottom:5px;
}
#main {
margin: .5em 0 0 0;
text-align: left;
width:80%;
}
#right {
float:right;
width: 19%;
background:#FF3300;
margin-left:2px;
height: 100%;
min-height: 200px;
}
#right .top {
top:0;
display:block;
background-color:#CCCCCC;
}
#right .bottom {
bottom:0;
display:block;
background-color:#FFCCFF;
height:30px;
}
#center {
background:#00FF99;
padding: 5px 0 0 10px;
float:left;
}
#footer {
clear:both;
height:30px;
background-color:#CCFF33;
width:80%;
text-align:left;
}
HTML markup:
<div class="container showgrid">
<div id="header">
<h1>Header</h1>
</div>
<div id="right"><span class="top">Top element</span><span class="bottom">Bottom Element</span></div>
<div id="main">
<div id="center">
<h3>Lorem ipsum dolor sit amet</h3>
<p>Content here</p>
</div>
</div>
<div id="footer">
<h3>Footer</h3>
</div>
</div>
This is not exactly the answer to your problem, but it should get you on the right track.
Behold! The Holy Grail!
If that doesn't work, another technique you can use is to fake the column. This is done by vertically tiling a background image the width of your column behind where you want your column to be. It's not bad and can work in a pinch.
css :
#header,#content,#main,#right,
#right .top,#right .bottom,#center,#footer
{float:left;}
html :
div.header <br>
div.center + div.left <br>
div.footer + div.right
should be like this/