|
CSS - Fixed/percentage Widths?
I have a left div which is fixed let is say 400px and the right div should extend to the edge of the screen. How can i get it to extend.
If i don't give any width to the right div: The right div has other dives which has got dotted bottom border, these dotted border will not extend to the end any ideas? cheers Similar TutorialsI'm wondering if it's possible to combine fixed pixel width borders and percentage width? I know I can do this... Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<style>
.div1
{
float: left;
width: 50%;
background: green;
}
.div2
{
float: left;
width: 48%;
background: red;
padding: 1%;
}
</style>
</HEAD>
<BODY>
<div class='div1'>
test
</div>
<div class='div2'>
test
</div>
</BODY>
</HTML>
But what I'd like to be able to do is specify a padding of 10px on div2 without breaking the layout. Is this possible with the w3c box model? I'm having a problem with my top Navigation. The top left has a search box, with a fixed width, but the other boxes across the top need to be dynamic width. Anyone have any suggestions on a good way to do this? I assumed I could set the boxes to a % width, and the % would be based on the container div, but this doesn't appear to be the case. Below is the skeleton of my code. I also have a problem with the main div. I cannot get it to float left of the side navigation bar when I put a sufficient amount of text in it. Thanks for the time to help me out! Code:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Welcome!</title>
<meta http-equiv="content-type"
content="text/html;charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<style TYPE="text/css">
#header {
color: #fff;
background-color: #000;
}
#topNav {
width: 100%;
min-width: 750px;
margin: 10px 0px;
padding: 0;
border: 1px solid #0f0;
}
#topNav:after {
content:".";
display:block;
clear:left;
height:0;
visibility:hidden;
}
/* Hides from IE-mac \*/
* html #topNav {height: 1%;}
/* End hide from IE-mac */
/* Search Box */
#searchBox {
float: left;
padding: 0;
margin: 0;
width: 150px;
height: 125px;
border: 1px solid #000;
background: #FFF;
text-align: center;
}
#nav, #nav ul {
list-style: none;
padding: 0;
margin: 0;
}
#nav li {
float: left;
margin-left: 8px;
padding: 0;
width: 18%;
height: 125px;
border: 1px solid #000;
background: #235;
color: #FFF;
}
#sideNav {
float: left;
width: 151px; /* 1px adjustment for no border */
margin-right: 10px;
border: 1px solid #0f0;
}
/* sideNav Boxes */
#sideNav .box {
margin-bottom: 10px;
padding: 5px 5px 5px 50px;
border: 1px solid #000;
height: 90px; /* add 10 for padding */
background: #235;
color: #fff;
background-repeat: no-repeat;
}
/* Main Content Container */
#main {
float: left;
padding: 10px;
border: 1px solid #000;
background: #fff;
}
/* Page Footer */
#footer {
clear: both;
background: #235;
border: 1px solid #000;
color: #aaa;
text-align: center;
margin: 10px 0px 0px 0px;
padding: 20px;
}
</style>
</head>
<body>
<div id="header">
Top Header Area
</div>
<div id="topNav">
<!-- Search Box -->
<div id="searchBox">
Fixed Size Search Box
</div>
<ul id="nav">
<li >Dynamic Sized Box in Top Nav</li>
<li>Dynamic Sized Box in Top Nav</li>
<li>Dynamic Sized Box in Top Nav</li>
<li>Dynamic Sized Box in Top Nav</li>
</ul>
</div>
<div id="sideNav">
<div class="box"> Fixed Size Box in Side Nav
</div>
<div class="box"> Fixed Size Box in Side Nav
</div>
<div class="box"> Fixed Size Box in Side Nav
</div>
</div>
<div id="main">
Main Content Area<br /><br />
Maecenas ut quam rutrum lacus tempus fringilla. Maecenas aliquam tempus libero. Mauris porttitor. Etiam at
risus a est sodales cursus. Cras ut ipsum. Vivamus at turpis ac lorem posuere rutrum. Vestibulum nisi nulla,
rhoncus a, rhoncus sit amet, placerat ac, justo. Nam consequat mauris ut orci. Etiam eleifend. Ut sem mauris,
imperdiet vitae, consectetuer a, ullamcorper non, nibh. Curabitur sapien. Fusce ultricies, ligula eget
scelerisque tempus, nisi nisl convallis dui, ut scelerisque magna est sit amet leo. Suspendisse facilisis
tortor faucibus elit. Sed diam. Duis imperdiet blandit mauris. Etiam cursus erat vel ligula.
</div>
<div id="footer">
Footer
</div>
</body>
</html>
How can I fix a Div a set distance below another Div without a set height? Hi all, I need some help. I have implemented a fixed header on my site, but certain content is scrolling above the header while other is scrolling behind. I would like it all to scroll behind the fixed div's. q)When creating webpages with css , are you supposed to use pixels or % for page widths? If I use pixels then i create for a 800X600 screen only, but it won't look messy when screen resized which I prefer. For some reason beyond me, my site displays perfectly in firefox, and opera. the width of the wrap which is supposed to be 1068 (I think off memory..) and in browsers such as chrome, ie8, and safari the wrap takes up the entire length of the screenn instead of that 1068. I tried zooming out to see if it was that issue and its not. My code is valid html/css and its not just some IE bug. Any help would be appreciated. www.devwebsites.com Thanks. I am having trouble trying to get the divs following my first left hand menu to all stay the same width but it is not working. When I set the first div width which contains the Javascript menu on the left, I cannot set the following div (which is going to contain CSS highlighted links) to go to 20% width so it is the same as the first div with the menu in it. here is the link to my page so you can see what I mean. http://kevinobrien.ca this is what I have in the style sheet so far for that side. If I add the width to div#sidebar2 it does not stretch that part but rather narrows it and messes it up div#sidebar {display: block; position: absolute; top: 5.4em; left: .4em; width: 20%; padding: 0; margin-left: .5em; border: 1px solid #335; margin-top: 2em;} div#sidebar2 {position: absolute; border: 1px solid #335; margin-top: 1em;} any help with this is greatly appreciated K.O. Hi, I'm Currently Redesigning my site Here And it all looks perfect in IE but when i go onto FireFox it looks mostly the same. Just One Problem The Menu At The Top, The Widths And There Is Gaps. Ive Been Working Hard And Cant Seem To Find The Problem. Heres The CSS for the whole menu: Code:
.navigation {
margin : 0 auto;
padding : 0;
font-family : franklin gothic book;
background-color : silver;
width : 59em;
min-height : 1em;
min-width : 59em;
text-align : center;
margin-top : 5px;
}
.navigation li.t {
min-width : 1em;
width : 1em;
min-height : 1em;
float : left;
background : silver url(img/tl.gif) no-repeat top left;
}
.navigation li.b {
min-width : 1em;
width : 1em;
min-height : 1em;
float : right;
background : url(img/tr.gif) no-repeat top right;
}
.navigation li.tls {
min-width : 1em;
width : 1em;
background : silver url(img/tls.gif) no-repeat top left;
}
.navigation li.trs {
min-width : 1em;
width : 1em;
background : url(img/trs.gif) no-repeat right top;
margin : 0;
padding : 0;
}
.navigation ul {
color : white;
list-style : none;
min-width : 59em;
display : inline;
width : 59em;
margin : 0;
padding : 0;
}
.navigation li {
min-width : 15em;
max-width : 15em;
width : 10em;
height : 1em;
display : inline;
}
.navigation li a {
height : 1em;
min-width : 11em;
max-width : 11em;
width : 10em;
color : black;
text-decoration : none;
background : white;
}
.navigation li.tl {
min-width : 1em;
max-width : 2em;
width : 1em;
background : white url(img/tls.gif) no-repeat top left;
}
.navigation li.tr {
min-width : 1em;
max-width : 2em;
width : 1em;
background : white url(img/trs.gif) no-repeat right top;
}
.navigation li a.mi {
margin : 0 auto;
padding : 0;
min-width : 11em;
max-width : 12em;
margin-top : 5px;
width : 11em;
color : black;
text-decoration : none;
background : white;
}
.navigation a:hover {
text-decoration : underline;
}
I Just Cant Seem To Find Out What To Do, Please Could SomeOne Help, Thanks In Advance, Jamie This is driving me insane. What is happening here? The green <div> should be the same width as the table - and that width should be 830px. It looks like IE is stretching the table wider than it should be... but if so then why? When you consider that the table is 830px wide, the pink div is 730px, the green div is 850px, the red div is 620px and the blue div is 100px, you can see that absolutely nothing is lining up correctly. It all seems quite random. PHP Code: // containg div <div style="width:834px; padding:0; margin:0 auto; clear:both; text-align: left; float:left;"> // table <table width="830px" cols="10" rows="$rows" cellpadding="4" cellspacing="1" style="border-top:1px solid #CCCCCC; border-bottom: 1px solid #CCCCCC;"> // pink div <div style="border: 2px solid #FF00FF; width:730px; padding: 0; margin:0;"> </div> // green div <div style="width:100%; margin:0; padding:0; border: 2px solid #00FF00;"> // red div <div style="border:2px dashed #FF0000; float:left; width:620px; margin: 0; padding: 2px 2px 2px 100px; text-align:center;"> // blue div <div style="border:2px dashed #0000FF; float:right; width:100px; text-align:right; margin: 0; padding: 2px;"> Internet Explorer: Firefox: Thanks, I want some particular text on my page to have an underline that keeps going after the text has finished so it spans 100% of the page (actually a div, not a page). It's easier to understand what I'm trying to do if you look at the links at the bottom of my post. My problem is that I got it to work fine on Internet Explorer, but not on Mozilla. Here is the webpage: http://www.eutron-inc.com/newsite/ And here is the stylesheet: http://www.eutron-inc.com/newsite/stylesheet.css So... can somebody help me? It has been a long day and tomorrow will be a longer. I give up trying to fix my problem and searching. So, that leads me here, where I will ask my question and once again receive the n00b stamp on my head. I hate css... but love it so. go to church css file Now why the heck does IE not give a crap about the width I set. increase the text size(ctrl+scrollWheelUp) and you will see that it is acting like an auto width. It is the same if I switch between % em pt px. Firefox views it just fine expect for the inner box going outside it's container on the navbar. Oh and the lists are shifted over to the right and the text goes outside the box and doesn't wrap inside. List problem with IE before and I fixed it only for it to show up in firefox. These are probably easy fixes but I am too tired right now and know I will not have time in the next couple of days to mess around. So, answer me up please. Bonus points for posting a link to a topic that all ready covers this that I blatantly missed. Sorry for the banner(too big file). The whole banner/header top will change but the navbar and content area concept is going to stay almost like it is so I need ot firgure this out. Grrr for some particular reason in Firefox and IE div.userinfo wont stay to its assigned width.. what it is doing is that its expanding its width to fill up the text.. but.. it should just break to a new line. html Code: Original - html Code <div class="container"> <div class="subject">this is for your subject</div> <div class="userinfo">Your memosfasdfasdfasdfasdfasdfasdfasdfsadfasdfasdfsadfasfasdfsadfsadfasdfa</div> </div> <div class="container"> <div class="subject">this is for your subject</div> <div class="userinfo">Your memosfasdfasdfasdfasdfasdfasdfasdfsadfasdfasdfsadfasfasdfsadfsadfasdfa</div> </div> css Code: Original - css Code div.container { border: 1px solid #000000; position: relative; margin: 0 auto; width: 580px; height: 432px; } div.subject { position: absolute; border: 1px solid #cccccc; top: 0px; left: 290px; width: 290px; height: 50px; } div.userinfo { position: absolute; border: 1px solid #cccccc; width: 15px auto; height: 150px; }
div.container {
Anyone knows why? i even changed white-space: nowrap, and etc. i recently changed up my homebrew forum's css on http://www.fasttracksites.com/forum/index.php and im having problems with it in FireFox, Opera and IE looks fine(usually its just the opposite). It looks like its not accepting the widths from http://www.fasttracksites.com/forum...FTSBlue/dim.css this is the file that contains the dimensions of each item, the other pages(if you click on one of the forum names) they are using the same widths for the last post and such and look fine, can someone please help? hi, i'm trying to create a horizontal navigation bar using Div's and css. So what i have is a background image for the background of the navigation bar, and then the links as images. i want to give varying widths to each link. i.e. if we were talking tables, i'd give the first cell with the first link a 10% width, the second a 8% the third a 15% etc... my question is, how do i do that with Divs? do i have to create a separate id (#) for each link? or can i specify a width in the div tag in the html (<div width=10%>) for example? Thanks, Heidi Code: <table style="width:90%;">
<tr>
<td>
Text goes here
</td>
<td>
Text 2 goes here
</td>
</tr>
</table>
The problem is that since I say width:90%, the second td is all the way to the right of my table. The width of the first table depends on the length of the text to be inserted. How can I have the text for the second td show up just to the right of where the 1st td ends? I'd like to do this without having to specify a fixed with in the first td. I'm having a problem with CSS widths on Firefox. My website, http://www.freefootball.org looks good in IE7 but when I look at it in Firefox, the main div on the left gets pushed down. I'm using a conditional CSS statement to get it working in IE which works well so its the #maincontentdiv that is the problem. My code for the divs in question is below. Any ideas on how to fix this? Code: }#ffsquaread {
display: block;
width: 270px;
text-align: center;
float: right;
margin-top: 10px;
}
#ffmaincontent {
float: left;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
line-height: 1.3em;
color: #000000;
display: block;
}
html>body #ffmaincontent {
float: left;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
line-height: 1.3em;
color: #000000;
display: block;
width: 80%;
}
Hello, I'm doing my best to get to grips with designing pages without tables and generally get unstuck when it comes to float and display attributes, and don't get the results I want. I have two div elements which I want to display next to each other. A navigation area goes on the left and the main contents to the right - both contained in a wrapper div: Code:
<div id="wrapper">
<div id="nav_cell">
the navigation bits
</div>
<div id="main_contents">
main contents of webpage
</div>
</div>
I need to try and get the layout sorted without specifying the width of either 'column' because the content is dynamic for each, so restricting the width (in pixels) wouldn't always necessary look right. In my first attempt I had the nav_cell float:left and the main_contents float:right. This mostly gives the desired effect... until the main_contents contains very little data in which case there is huge white space down the middle of the page - the nav_cell way on the left and the rest of it on the right. I tried to specify the width of the main_contents to 100%, but rather than fill the space to the right of the nav_cell it dropped out of the flow and filled the full width under the nav_cell instead of next to it. I toyed with trying to get the two div to display:inline, but that had disasterous consequences. How should I approach this problem. It feels like it should be simple to get two columns of variable width to sit next to each other. I feel absolute/relative positioning has something to do with it but I don't fully understand that either... Thanks in advance. If I have the following: <span id="span1"></span> <span id="span2"></span> If I set the width of span1, I want to have span2 adjust it's width to be the same automaticly. Something dynamic or a variable. For example in simple terms. span1.width = 150px; alert(span2); would show 150px also. Hope that make sense. Thanks I am having an issue with a div that I am trying to float and set the width of. The page works fine in Firefox, but in IE it doesn't display correctly, Here is the pertinent code, <div id="textbar" class="sidebar" style="width:175px;"> <div id="handle"> <a href="#"><img src="http://swvtc06/swvtc/images/collapse.jpg" border="0" alt="Click to Collapse the Navigation Bar" onclick="sidebar()" /></a> </div> <div id="sbText" style="display:block;"> <!--#include virtual="/swvtc/include/nav_test.htm" --> <!--#include virtual="/swvtc/include/smweather.asp" --> </div> </div> Here is the CSS for the #handle div, #handle { float:right; width:9px; } In Firefox, the handle div is correctly inline with the background graphic. In IE, the handle div is about 9 pixels to the left of where it should be. We are in the ancient times, we still are mandated to be using IE 6, so that is where I am having the problems. Where am I going wrong? Thanks, Drew for those of you who have helped me before and told me to change from tables to divs, well, i'm on the last part before i convert the big table. my problem is that on my home page i have category boxes that i want to each occupy half of the main column. HOWEVER, they also need margins to separate from each other. here is their css code: Code: .leftcatpanel {
margin-left:8px;
margin-top:0px;
margin-bottom:8px;
margin-right:4px;
float:left;
width:50%;
}
.rightcatpanel {
margin-left:4px;
margin-top:0px;
margin-bottom:8px;
margin-right:8px;
float:left;
width:50%;
}
however, the 50% width makes them overflow to the next line, even though they are floated. how can i set them to stay on the same line, make their widths perfectly halved, and keep their margins??? (click here for the way it looks now and scroll down to the middle of the page) |
|||||||