|
CSS - Help Getting Right Side Divs To Stay Within Content
Hi,
I'm racking my brain here and I can't figure out what I'm doing wrong. First of all, I have a "sidebar" div that is being pushed outside of the page, even though there is plenty of room for it in the content. http://65.175.116.253/design/demo.html I have included the CSS below, followed by the HTML and you can get the rar file for the entire layout at the following link http://65.175.116.253/design/design.rar I've been racking my head! All I want is the side bar, the two boxes way off to the right, to be floated to the right hand side of the screen, contained within the page. I can't figure out what I'm doing wrong. Can somebody look at this and tell me what I am doing wrong? I will paypal $5 to who ever figures it out.. Code: /*--- Generic Styles ---*/
body
{
background: #e3edc2; color: #333;
font: .8em, Arial, verdana, sans-serif;
margin: 0;
padding:0px;
}
#main {width:840px; margin:18px auto 0 auto; _text-align:left;}
a
{
color: #686397;
}
a img
{
border: 0px none;
}
p
{
margin: 0 0 1em;
}
.smallboldtext
{
font-family: verdana, helvetica, sans-serif;
color: #686397;
font-size: .7em;
font-weight: bold;
}
.mediumtext
{
font-family: verdana, helvetica, sans-serif;
color: #686397;
font-size: .9em;
}
.mediumboldtext
{
font-family: verdana, helvetica, sans-serif;
color: #686397;
font-size: .9em;
font-weight: bold;
}
.largetext
{
font-family: verdana, helvetica, sans-serif;
color: #686397;
font-size: 1.5em;
}
/*--- Header Styles ---*/
#header
{
margin-bottom: 1.75em;
padding-top: 1px;
background: #abd240;
}
#navbar
{
margin: 0;
padding: 0.5em 3em;
background: #686397;
color: #fff;
}
#navbar li
{
display: inline;
margin-right: 0.5em; padding-right: 0.75em;
border-right: 1px solid #99c;
font-weight: bold;
}
#navbar li.last
{
border: 0px none;
}
#navbar a
{
color: #d4ec84;
text-decoration: none;
}
#today
{
text-align: right;
margin-top: -1.66em; padding: 0 2em 0 0;
color: #fff;
line-height: 1;
}
/*--- Content Styles ---*/
#content
{
float: left;
padding: 0 20em 4em 3em;
width: 100%;
}
#content h1
{
background: #fff; color: #686397;
font-size: 1.5em;
margin: 0 33% 1.25em -2em; padding: 0.4em 2em;
}
#content h1 b
{
color: #b0d742;
}
#content h2
{
margin: 0.5em 0; padding-bottom: 0.25em;
border-bottom: 1px solid #b0d742;
font-size: 1.5em;
}
/*--- Content Styles ---*/
table.basic
{
border: 0px;
width: 100%;
border-collapse: collapse;
}
table.basicborder
{
border: 2px solid #b0d742;
width: 505px;
border-collapse: collapse;
}
table.mainsearch
{
border: 2px solid #b0d742;
width: 415px;
border-collapse: collapse;
}
/*--- Sidebar Styles ---*/
#sidebar
{
float: left;
width: 17em;
margin: 0 0 4em -18em; /* this creates a mathematical layout width of -1 */
}
#sidebar div h3{
background: #9b96ca;
}
#sidebar form_div
{
margin: 0; padding: 0.8em;
}
#sidebar div{
background: #3a3c2d; color: #fff;
padding: 0 1em 1em;
margin-top: 0.75em;
}
#sidebar div h3{
font-size: 1.25em;
margin: 0 -0.8em; padding: 0.4em 0.8em;
text-transform: lowercase;
}
#whatiscompany h4{
margin: 0 0 0.5em; padding: 0.5em 0;
border-bottom: 1px solid #fff;
font-weight: normal;
}
#whatiscompany p:first-line{
font-style: italic;
}
/*--- Footer Styles ---*/
#footer
{
clear: both;
padding: 1.5em 3em;
background: #a0c63a;
height: 15px;
}
#footer p
{
margin: .1em;
}
#footer a
{
color: #333;
text-decoration: underline;
}
------------------------------------------------------- Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>www.company.com/</title>
<link href="css.css" type="text/css" rel="stylesheet" media="screen">
<!--[if IE]>
<style type="text/css">
#today{
text-align: right;
margin-top: 0;
margin-bottom: 0;
padding: 0 2em 0 0;
position: relative;
top: -1.66em;
color: #fff;
font-weight: bold;
line-height: 1;
}
</style>
<![endif]-->
</head>
<body>
<!-- mockup, adding borders | markup, using float for layout (or the appropriate section) -->
<div id="header">
<img src="logo.jpg" alt="a link to the home page" width="231" height="52">
<ul id="navbar">
<li class="first">
<a href="http://www.company.com">nav link</a></li>
<li><a href="http://www.company.com">nav link</a></li>
<li><a href="http://www.company.com">nav link</a></li>
<li><a href="http://www.company.com">nav link</a></li>
<li><a href="http://www.company.com">nav link</a></li>
<li><a href="http://www.company.com">nav link</a></li>
<li><a href="http://www.company.com">nav link</a></li>
<li class="last"><a href="http://www.company.com">nav link</a></li>
</ul>
<p id="today">date here</p>
</div> <!-- end div id header -->
<div id="content">
<h1><b>home:</b> search</h1>
<img src="flash.jpg"><br>
<h2>quick search</h2>
<table class="mainsearch">
<tr>
<td>
<FORM action="http://company.com/" method="post">
<input type="radio" name="quicksearch"><span class="smallboldtext">title</span>
<br>
<input type="radio" name="quicksearch"><span class="smallboldtext">title</span>
<br>
<input type="radio" name="quicksearch"><span class="smallboldtext">title</span>
<br>
<input type="radio" name="quicksearch"><span class="smallboldtext">title</span>
<br>
<input type="radio" name="quicksearch"><span class="smallboldtext">title</span>
<br>
<input type="radio" name="quicksearch"><span class="smallboldtext">title</span>
<br>
<input type="radio" name="quicksearch"><span class="smallboldtext">title</span>
<br>
</td>
<td width="285" valign="top">
<br>
<span class="smallboldtext">Keywords - </span><input type="Text" name="keywords" size="25">
<br>
<span class="smallboldtext">Within - </span><select name="distance">
<option value="50"
>
50
</option>
<option value="Any"
>
Any
</option>
<option value="1"
>
1
</option>
<option value="5"
>
5
</option>
</select>
<select name="distance_measure">
<option value="Miles"
>
Miles
</option>
<option value="kilometers"
>
Kilometers
</option>
</select> <span class="smallboldtext">of</span>
<br>
<span class="smallboldtext">City & State or Zip - </span> <input type="Text" name="zip" size="15">
<br>
<center>
<input type="submit" name="search" value="search">
</center>
</FORM>
</td>
</tr>
</table>
</div> <!-- end div id content -->
<div id="sidebar">
<div id="whatiscompany">
<h3>what is company.com?</h3>
<h4>www.company.com</h4>
<p> This is simply example text that goes here. Sample example text is in this place. You can read the sample text here it is.
<br>
</p>
</div> <!-- end div id whatistea -->
<div id="loginsidebar">
<h3>login</h3>
<br>
<form action="http://company.com" method="post" name="login">
<p>
Username - <INPUT type="Text" name="member_user_name" size="12">
<br>
Password - <INPUT type="password" name="member_password_a" size="12">
<INPUT type="submit" name="submit" value="login" >
</FORM>
<br>
<a href="http://company.com">Forget Your Password?</a>
<br>
<br>
</p>
</div> <!-- end div id loginsidebar -->
</div> <!-- end div id sidebar -->
<div id="footer">
<p>
- <a href="http://company.com">nav link</a>
- <a href="http://company.com">nav link</a>
- <a href="http://company.com">nav link</a>
- <a href="http://company.com">nav link</a>
- <a href="http://company.com">nav link</a>
- <a href="http://company.com">nav link</a>
- <a href="http://company.com">nav link</a>
- <a href="http://company.com">nav link</a>
- <a href="http://company.com">nav link</a>
- <a href="http://company.com">nav link</a>
- <a href="http://company.com">nav link</a>
-
</p>
</div> <!-- end div id footer -->
</body>
</html>
Similar TutorialsHi! I want to have let's say 4 divs of width:25% horizontally side-by-side. Ex: (I'll ry to draw it ) | | | | | | | | | | | | | | | Thank you. Alright, I run a joomla site and im working on making a 100% tableless xhtml compliant template. I'm very new at this so im trying my best to learn. I used the Lean version of skidoo's layout as the base and then added all the appropriate php tags needed to make it a joomla template. For the one part I need two modules to load right next to each other near the top of the page to mimic the table version of the Latest News and Popular Modules. I'll show you code snipits of how I did it. Code:
html:
<div id="contentColumn">
<div class="inside">
<!-- middle column content begin -->
<p class="blocktext">
<?php mosLoadModules( 'banner', -1 ); ?>
</p>
<div id="users">
<?php mosLoadModules ( 'user1' ); ?>
</div>
<div id="users">
<?php mosLoadModules ( 'user2' ); ?>
</div>
<p>
<div id="nofloat">
<?php mosLoadModules ( 'top' ); ?>
<?php mosMainBody(); ?>
<?php mosLoadModules ( 'bottom' ); ?>
</div>
css:
/*top users */
#users {
float:left;
width: 300px;
}
#nofloat {
float: none;
}
So anyways this does indeed put each div tag side by side but my problem is that I need the following PHP code ( <?php mosLoadModules ( 'top' ); ?> <?php mosMainBody(); ?> <?php mosLoadModules ( 'bottom' ); ?>) to return to the next line after the div's, but instead it jumps everything to the right and breaks the template. So I added the nofloat css and that fixed it and put the rest of the content below the side by side div's but now it doesn't work in FireFox. Now I tried padding-top and that worked in both browsers, but its not flexible as the side by side div modules are not always there and I don't want 200px of white space on the pages that don't show it. Also as a side note I tried putting <?php mosLoadModules ( 'user1' ); ?> and user2 into separate div tags that that floated left and right but it had the same outcome, so I stuck with one float left that seems to work the same. My question is what can I do to make this content show after the side by side div's and not beside it in both browsers? You can see what I mean by looking at this test site in both IE 6 and FireFox. http://www.wii-volution.com/testbed/ Thanks for any help you guys can give me! Hey, I'm not entirely sure why this is happening, you can see it here and the css I've been having some issues getting a design for a site I'm co-authoring to display correctly using CSS. I know that what I'm trying to do should be possible, but I haven't been able to figure it out and am getting pretty damn frustrated with the whole thing. I could probably do it with tables, and right now I have it set up with some javascript that I threw together, but css+divs would be the ideal solution. Anyways, this is basically what I want to try and do (that's the javascript version). Just resize the window a bit to see what i'm getting at. Here's the source: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Title</title>
<style type="text/css">
<!--
#leftpane {
float: left;
height: 100%;
border: 1px solid black;
}
#rightpane {
float: right;
height: 100%;
border: 1px solid black;
}
-->
</style>
<script type="text/javascript">
<!--
// get rid of all this javascript and figure out a way to do this with css
var windowWidth = 800;
window.onload = function() {
getWindowSize();
resizeLeftPane();
}
window.onresize = function() {
getWindowSize();
resizeLeftPane();
}
function getWindowSize() {
if(window.innerWidth) {
windowWidth = window.innerWidth;
} else if(document.documentElement.clientWidth) {
windowWidth = document.documentElement.clientWidth;
} else if(document.body.clientWidth) {
windowWidth = document.body.clientWidth;
}
}
function resizeLeftPane() {
var rightpaneWidth = document.getElementById('rightpane').offsetWidth;
var margin = 10;
document.getElementById('leftpane').style.width = String(windowWidth - rightpaneWidth - margin * 3) +'px';
}
//-->
</script>
</head>
<body>
<div id="leftpane">
<p>this pane needs to stretch as wide as it can while leaving room for the image at right, whose width is arbitrary</p>
</div>
<div id="rightpane">
<img src="http://movingboxstudios.com/testz0rz/images/box.jpg" height="100%" alt="image" />
</div>
</body>
</html>
Basically I need a way to have 2 elements next to eachother, 1 of which is an arbitrary size and the other be wide enough to fill the rest of the containing block. Any help would be much appreciated. EDIT: Here's a link to the actual working design, maybe that'll help in understanding my question (don't open it in IE unless you want a facefull of ugly). I'm working on a site which has a header and footer div, and in the main section in between, it has a narrow left div and main content to the right. I've got the overall width centered at 90%, and I want the left div to be 250px wide, and then the right main content div to be the remaining width of the 90%. I also want to make sure it doesn't resize below about 600px when the screen is resized. Am I better off setting a fixed width of the overall width instead of a percentage? That way I can make the page about 800px wide, left pane 250px, and main content 550px? Any other thoughts? Thanks. So I'm not really new to CSS or HTML though I might as well be considering the last time I did anything in either that had much substance was a class back in high school, about 6 years ago. This is what I want... DIV1 --------------- DIV2 --------------- DIV 3 2 would be in the center with 1 and 3 floating left and right respectively. Instead I'm getting this... DIV1 --- DIV2 ----------------------------------------- DIV 3 or DIV1 DIV2 DIV3 ...I hope you guys get the idea. I'm having trouble figuring it out. My ext CSS sheet, if you care to look, is he http:// livingway.110mb. com/mainstyle.css the frame in question, he http:// livingway.110mb. com/main.htm I'm hoping it'll let you all look at them. It's nothing professional yet because I'm only trying to give an update idea to our "webmaster". Anywho, let me know what I'm doing wrong. My brain hurts right now. i have two divs that are side by side and i want them to have the same height, but i will not know the height ahead of time as the content for at least one of the divs is dynamic (calendar list) and can contain no items up to as many items as there are time intervals in a day. the html for the section in question is Code: <div id="spotlight-wrapper">
<div class="spotlight">
<h3>Currently...</h3>
<div id="training" class="spotlight-sub">
<ul>
<li><strong>Running</strong> 3mi/4mi/3mi</li>
<li><strong>Bench Press</strong> 175lbs</li>
<li><strong>Deadlift</strong> 205lbs</li>
<li><strong>Squats</strong> 275lbs</li>
</ul>
</div>
<ul class="inline-list">
<li>
<a href="http://www.randomhouse.com/features/crichton/airframe/" title="Random House Publishing: Airframe">
<img src="/images/reading.png" alt="Airframe by Michael Crichton" />
</a>
</li>
<li>
<a href="http://www.google.com/musicl?lid=HnJbFL6nobL&aid=lqUKIAaw6tN&sa=X&oi=musiamp;c&ct=result" title="Google Music: Hinder - Extreme Behavior">
<img src="/images/listening.png" alt="Extreme Behavior by Hinder" />
</a>
</li>
<li>
<a href="http://en.wikipedia.org/wiki/300_(film)" title="300 the movie on Wikipedia">
<img src="/images/movie.png" alt="300 - Tonight We Dine In Hell" />
</a>
</li>
<li>
<a href="http://www.fox.com/house/" title="Fox's House M.D. starring Hugh Laurie">
<img src="/images/television.png" alt="House M.D. on Fox" />
</a>
</li>
</ul>
</div>
<div class="spotlight">
<h3>In the public...</h3>
<div id="calendar">
<ul id="events">
<li>
<strong>09/25 20:00 - 09/25 21:00</strong>
<br />House MD
</li>
<li>
<strong>09/26 16:00 - 09/26 17:00</strong>
<br />Weekly Tempo Run
</li>
<li>
<strong>09/26 17:30 - 09/26 18:30</strong>
<br />RPM (Christi)
</li>
<li>
<strong>09/27 06:00 - 09/27 07:30</strong>
<br />Weight Training
</li>
<li>
<strong>09/28 06:00 - 09/28 07:30</strong>
<br />Weight Training
</li>
<li>
<strong>09/28 08:30 - 09/28 09:30</strong>
<br />RPM (Lauren)
</li>
<li>
<strong>09/29 07:30 - 09/29 09:30</strong>
<br />Long Run
</li>
</ul>
</div>
</div>
</div>
and my unsuccessful attempt at the necessary css Code: div#spotlight-wrapper {
min-height: 317px;
}
div.spotlight {
width: 471px;
height: 100%;
float: left;
margin: 19px 12px 7px 0;
background: #373737;
overflow: hidden;
}
div.spotlight h3 { background: #555555; margin: 0; padding: 7px; }
here is a live sample Hello all, Im a bit of a novice when it comes to CSS but im learning, bear with. the site in question is http://mgilbert.co.cc/testing I already have the left menu and the #maincontent div perfectly aligned side by side, but i cant for the life of me align the #left and #right divs side by side, instead the right one sits underneath the left as you can see on the site. if i float the right column, the text flows out of the maincontent div. CSS Code Code:
body {
background: #23232F;
color: #F7CF8A;
text-align: center;
}
a { color: #F7CF8A; }
a:hover {color: #07CF8A; }
#page {
width: 80%;
border-style: solid;
margin: 0 auto;
background: #494949;
color: #F7CF8A;
padding: 15px;
}
#header {
background: #23232F;
color: #F7CF8A;
}
#lmenu {
width: 19%;
padding: 3px;
border-style: solid;
float: left;
}
#maincontent {
margin-left: 20%;
border-style: solid;
}
#left {
width: 49%;
border-style: solid;
}
#right {
margin-left: 50%;
border-style: solid;
}
any help would be appreciated. thanks Hi, So I know this is a common problem but my attempts at following past suggested advice did not help my page. I want to display two divs (sidebar and content) side by side on the page. Unfortunately, rather than display side by side, the two elements are placing one on top of the other. I've tried float: left/right, position: relative and display in line. Never the less, the elements still won't stay next to each other. Does anyone have any ideas? Thanks. My head has been hurting all week trying to figure this out. I'm trying to have two divs set side by side, both of them inside a parent div block. I've tried a bunch of methods, but each one fell short for one reason or another. Here's the partial code. Code: CSS
div.base { margin: 10px; text-align: left;}
div.left { float:left; width: 120px; min-height:100px; border: 1px dashed purple; }
div.center { border: 1px dashed blue; margin-left: 135px; min-height:200px; }
Code: HTML <div class="base"> <div class="left">test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br></div> <div class="center">test2</div> <div></div> </div> For the most part, the layout is fine. However, if the left side exceeds the height of the right side, it bleeds out of the parent div block because it's floating. Positioning doesn't work because the parent block is centered on the page by the body tag and scales to 80% window width. Setting them inline doesn't allow me to set a fixed width on either block. Inline-Block sounds like it should work perfectly, but it's not fully supported by most main browsers. Any help would be appreciated Hi- I am having a challenge. I have two divs side by side, and I need them both to stretch to the same height. So if there is extra content in div#2, div #1 stretches down with it and fills with a background color. I have them both set to height: 100%, with a wrapper div set to 100% height around them, but I am definetly doing something wrong. thanks in advance S i have two divisions that i have been able to set side by side, using display:inline; but i want the left div to appear on the far left and the right div to appear on the far right. except i cant get it to work. Code:
<script type='text/css'>
.left {
display:inline;
margin-left:3px;
width:30%;
}
.right {
display:inline;
margin-right:3px;
width:70%;
}
</script>
<div class='left'>Left column</div><div class='right'>Right column</div>
with the code example above the divs seem to be right aligned. any ideas? hi all... i been having some trouble with this one, perhaps someone can guide me in the right direction... Code:
.left_top{
width:10px;
height:100px;
border:1px solid white;
background-color:red;
margin:0px;
padding:0px;
float:left;
overflow:scroll;
}
.middle_top{
width:10px;
height:100px;
border:1px solid blue;
background-color:red;
margin:0px;
padding:0px;
overflow:scroll;
}
.right_top{
width:10px;
height:100px;
border:1px solid pink;
background-color:red;
margin:0px;
padding:0px;
overflow:scroll;
float:right;
}
thats the code, it should be pretty clear as to what i'm trying, but here goes anyway... i want the 3 divs to align side by side, in this order left/middle/right. they are inside a <td> but it makes no difference if i make that a <div>... please help me out... frank/ I am having a little difficulty with aligning two divs. I have one 800 wide div that has the site content...it needs to be centered at all times. The second div is 160 wide and I want it at the same height as the first, but ten pixels to its right. This image should visually show it: I have tried absolute position 50% 0% for the first with the second as relative..and it overlays it...treid different combinations of float as well. What am I doing wrong? Thanks in advance how do i get 3 divs side by side? left div: would be on the far left with no image no text. middle div: i would like for it to take up the middle of the page which would have equal space on both sides. right div: would have a small badge icon which would always be on far right of the page. Code: <html>
<head>
<style>
.left { float:left; width:50px; margin-right:10px;}
.center { float:left; width:50px; margin-right:10px;}
.right { float:right; width:50px; margin-right:10px;}
.left, .center, .right{background-color:Purple; }
</style>
</head>
<body>
<div>
<div class="left">
left
</div>
<div class="center">
<img src="images/logo.png" />
</div>
<div class="right">
<img src="images/badge.png" />
</div>
</div>
</body>
</html>
the problem is that the center div is not centered in the middle. graphically this is what i'm trying to achieve. the center div would have an image in place that would always be centered. please help, thanks. Hi Folks, I'm stumped! I can't get 2 DIVS to sit side-by-side. Here's what I want to achieve, see the two orange and black strips at the top?: [screenshot]: http://www.johniwhite.com/fr/screenshot.html But instead I get this: http://www.johniwhite.com/fr/template_1.html The black strip drops below the orange. I'm sure this can be done without 'layers/position: absolute' can't it? Do I need to specify 'clear: both' or something someplace? I've tried all sorts! Thanks, hoping you can help. John I'm having a problem with display two divs side by side in Internet Explorer. The page looks fine in Netscape, but IE show white space between the two divs. Code:
<html>
<head>
<style type="text/css">
body { margin: 0px;
padding: 0px; }
div#logo { float: left;
width: 120px;
height: 120px;
background-color: #0000FF;
padding: 0px; }
div#title { height: 120px;
margin-left: 120px;
background-color: #FF0000;
padding: 0px; }
</style>
</head>
<body>
<div id="logo">Logo</div>
<div id="title">Title</div>
</body>
</html>
What am I missing here? Anne Ok, so I've learned to stay away from tables when you don't need them, and I have an instance where this is the case. I have a container div that has a header, content and a footer. On my home page, I have to divs next to each other with the same height and a div below them towards the right. To simplify my problem, look at this example. Code:
<html>
<body>
<div style="float:right">
Hello there!
</div>
<hr>
</body>
</html>
If there's a "float:right" on that div, the hr tag below doesn't get pushed down. But if I use relative positioning and don't use the floats, I can't put the two top divs next to each other. The other option is to use absolute positioning, but again content below doesn't get pushed down correctly. It seems that using "clear:both" works, but it seems weird that this has to be done. For example if I have floating divs in a container, I can get them to stretch out the container like so: Code:
<html>
<body>
<div style="border: 1px solid #000; ">
<div style="float:right">
Hello there!<br />
Hello there!<br />
Hello there!<br />
Hello there!<br />
Hello there!<br />
Hello there!<br />
Hello there!<br />
</div>
<div style="clear: both"></div>
</div>
<hr>
</body>
</html>
Am I missing something fundamental here? Is there a better solution? Thanks in advance. |
|||||||