|
CSS - 2 Divs Floating, One Fixed Width, The Other The Rest Till 100%?
Similar TutorialsHi, I'm wondering how do you make two divs next to each other, in line with each other, but have one to the left be a set width, and the one on the right be everything else that is left (changes as the user scales the browser). Here is an example: ( -100px- )( ---------everything else that is left---------- ) (more stuff can go here now) I'm having trouble having one float: left and width: 100px, the other float: right and width: 100% (I think this part is the problem). I don't know why I'm having such a hard time with this. I'm trying to build a "message box" for an application that I'm working on. Box requirements: Fixed width Variable height (fit to content) Centered on page Floating over other elements (I don't want the rest of the elements on the page to move when the box is displayed) Must work in IE/FF/Safari Here's what I tried: css Code: Original - css Code #message_box{ border: 1px solid #AAA; background-color: #DDD; width: 400px; display: none; /* This gets changed to block by javascript */ position: absolute; top: 0px; text-align: center; margin: 20px 0px 0px 0px; padding: 20px; font-size: 12px; z-index: 20; }
That creates a box that I'm happy with, but I'm having problems figuring out how to center it on the page. Do I have to put another div element around my #message_box element? Is there a way to center it with margins? Examples would be appreciated... Also, in IE, form drop downs "bleed through" the box. The box covers up everything except <select>s. Is there any fix for that? Hi I am trying to make a table to display some stuff within a fix sized window. I want to have 5 columns of fixed width and one column that spans the rest of the remaining space. The Idea is to allow the widths of the first 5 columns to be changed by a script and having the last one adapting as needed... html Code: Original - html Code <div class="container"><table cellspacing="0"> <colgroup> <col width="40" /> <col width="220" /> <col width="120" /> <col width="65" /> <col width="40" /> </colgroup> <thead> <tr> <th>A</th> <th>B</th> <th>C</th> <th>D</th> <th>E</th> <th style="width: 100%;></th> </tr> </thead> <tbody> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td style="width: 100%;></td> </tr> </tbody> </table></div> <div class="container"><table cellspacing="0"> <colgroup> <col width="40" /> <col width="220" /> <col width="120" /> <col width="65" /> <col width="40" /> </colgroup> <thead> <tr> <th>A</th> <th>B</th> <th>C</th> <th>D</th> <th>E</th> <th style="width: 100%;></th> </tr> </thead> <tbody> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td style="width: 100%;></td> </tr> </tbody> </table></div> css Code: Original - css Code div.container { height: 400px; width: 800px; overflow: scroll; } table { width: 100%; } td { border-style: solid; border-color: silver; border-width: 0px; padding: 1px 3px; } th { border-style: outset; border-color: silver; border-width: 2px; background: silver; padding: 1px 3px; }
It really does fill the entire space but the last column crushes all the other into their minimal width resulting in linebreaks between words inside the cells... Please help me I have two div tags that I want to float next to each other. The page looks like this <table>These Tables stretch 100% of the width</table> <table>''</table> <div class="ParentDiv"> <div class="menuholder"></div> <div class="ChildDiv"></div></div> in FF everything works the way I want to. In IE if I shrink down the browser then the second div tag drops below the first. I want to change this so that it does not drop below but remains in the same place. Is there anything I can set to do that? If I remove the float and change the position on the menuholder the childdiv tag does not drop but the menuHolder content does not stretch the size of the parentDiv and gets chopped off at the height of the childDiv Code:
.ParentDiv {
position: relative;
width: 100%;
width:expression(document.body.clientWidth < 997 ? '997px' : '100%');
min-width:997px;
max-width:100%;
overflow:hidden;
min-height: 400px;
}
.ChildDiv {
position: relative;
width: 100%;
min-height: 400px;
}
.menuholder {
background-color: #EFF3F5;
color: #eef;
position: relative;
float: left;
left: 0px;
top: 0px;
overflow: hidden;
width: 160px;
z-index: 100;
}
Hi folks, I hope this is achieveable ... I have tried numerous ways of floating and whatnot, here is what i want: I want to have one container, having 3 divs inside. of these 3 divs the left and the right one are fluid, the center one is an image with a fixed width. looking like this: Code: ________________________ l l l fluid fix fluid l ________________________ restrictions: i do not want to use positioning at all. best would be, if it is all achieved with float and margins, looking good in IE and FF .... i have a page up, that will show you my design .... note, that only the box containing the image is the problem part on that page (some of you will recognize this i believe) the names of the classes are textboxleft, textboxright and id big_logo thanx! i want to redesign the page i have to only be displayed with floats and margins and no more positioning .... 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. Hi, I have hit the "wall" in my knowledge of CSS while trying to implement a "flex-width-equal-height-sidebar-layout" style of layout as a skin/theme for a message board system and need some help. My trouble occurs when a direct link to the post is used (instead of following the menu navigation system) where the top menu information/links area (the area between the banner and the post) is chopped off... The relevant portion of the CSS seems to be the .col_wrap {margin-top: 10px; border: 0; overflow: hidden; float: left; width: 100%; position: relative; z-index: 10; clear: both;} portion of my CSS because if I take out the overflow:hidden declaration then the menu portion of the skin/theme/layout shows correctly but the sidebar the shows the part which should be hidden at the bottom and the footer completely vanishes from view! My apologies but this is the best I can do without having the ability to post pics or urls which could better explain what is wrong and frankly speaking I don't know how anyone here can help given my inability to show the problem but hopefully someone knows or has run into this problem before or can offer some resources that may be of assistance.... i ve been playing with my page and been trying to modify the width of the page (divs) according to the browswer's width. The problem is i want the navigation menu on left to be fixed width (say 200px) and the center div and the right column to be variable width. Also, i want to set a minimum width , so that the floating divs dont roll below the navigation menu. here s the link to the page. try reducing ur browser windows size . the content div rolls down under theleft nav menu. http://ccc.1asphost.com/pacemakerpr...r/cicuitlab.htm Also , i get wierd result in netscape navigator. please help I have seen a design which I find pretty interesting where in the main site is aligned left and fixed width at say 700px wide. Yet the footer seems to span the entire screen. The header also seems to use the entire screen width but that is beign accomplished with the background image, but this footer goes all the way to end of the screen and naturally adjusts itself under all the content. Is there a way to get this effect? I'm at the very very very begaining of a table-less design (my first, actually). The problem is, since I have decided to have a non-fixed width, when the browser is minimized, at a certain point the design breaks. See it here (please don't make fun! it's just the start): SiliconSatan.com/test.php I'd like to set a minimum width, probably on the container <div>, so at a certain point it sort of becomes like a fixed width? No smaller than a set width? [EDIT] Also, I have a question about background color mismatch, but it was not quite OT for the CSS forum: http://forums.devshed.com/web-desig...e7t-403266.html I have seen this done but can't find any examples at the moment, but what I am looking to emmulate is have a page that required vertical scrolling. On either the left or right hand side is (for example) a square image and directly below it is a menu. When the user scrolls down the page the image goes off the top but the menu sticks to the top so is always visable. When the user scrolls back up as soon as the image starts to appear it pushes the menu back down so it is sat below the image. If i used position:fixed I can keep the menu in the same place when scrolling but I would like it to rise to the top of the browser when space is availble when scrolling. Make sense? I really need a code. It is for a Multiple Fixed Floating Images at specific margins Fixed is very important. AKA. Scrolls with page. margins are img1 - left: 40px top: 40px img2 - left 56px top: 300px; Thank You Very Much. -Please Help! --nick11682 Hello, can anyone help me with this? I'm having trouble floating some divs and I can't find the problem. 1. navigation should be aligned with the bottom of the h1 logo 2. the content div should come next to the list of brands. The content div should overlap the black bg at the top. www. claeysconsult . be / misskado / index2.html Thanks in advance... Hi im experiencing big problems with creating this layout. I spent whole day with positiooning this divs but i cant do this final layout. Everytime i want to float divs to left DIV 1 and DIV 2 are ok but DIV 3 jump to new line under DIV 2 and dont fit the gap between DIV 3 and div 1 . Can someone please help me ? Thanks ... link to image : xipic.eu/ufiles/njf25uy8_divs.png Hi, this is my first post. I have a problem with the navigation bar on a site that I'm developing (musicboxtheatre.com). It renders properly in firefox and safari, but, of course, IE is causing problems. It renders as steps. The tabs are dropping vertically so that their tops are aligning with the bottom of the previous tabs line-height. Does anyone know of a solution? Update: I rewrote everything, and it somehow works now. Nevermind. Pretty much what the title says, is it possible to center a div in the middle of the screen without giving it a fixed width? I having a bit of a problem with my div tags. I have set a table inside the divs to a fixed width of 300px and the same with the div tag. But if I was to insert text into the table such as: 11111111111111111111111111111111111111111111111111111111111111111111 this makes the table and div tag expand to fit the text on one line. Making is disappear off the page so people have to scroll to view the text. I have tried the CSS command of "table-layout:fixed;" but this just makes the table end and cut of the end of the text. Is there anyway round this?? I cant get the side menu (colored in red at the moment...will eventually be white like the rest) to overflow: auto with 100% height....i know that you need a fixed with for overflow and the only solution i could find (havent tried it tho) was to use javascript to get the window dimensions but i am trying to avoid using javascript. heres the code: <b>The Page:</b> Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>
TEST PAGE
</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<link rel="stylesheet" type="text/css" href="stylesheets/default.css">
</head>
<body>
<div id="content">
<div id="logo">
<img src="/Images/owlstreelogo.jpg" height="100px" width="300px" alt="Welcome to Owl's Tree">
</div>
<div id="quicknav" style="height: 25px; background-image: url('/Images/quicknavbackdrop.jpg');">
<div id="quicknavtext" style="position: relative; top: 4px; margin-left: 25px; font-weight: bold; text-align: center;">
<a href="index.html">Home</a>
<a href="">Profiles</a>
<a href="">Chat</a>
<a href="">Forums</a>
<a href="">Messages</a>
<a href="">Extras</a>
<a href="">Tickets</a>
<a href="">Suggestions</a>
</div>
</div>
<div id="sidemenu" style="height: 405px; width: 200px; background-color: #FF0000; overflow: auto;">
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
</div>
</body>
</html>
<b>The CSS</b> Code:
body {
background-image: url('/Images/grassbackdrop.jpg');
}
a:link {
color: #7E5C14;
text-decoration: none;
}
a:visited {
color: #7E5C14;
text-decoration: none;
}
a:active {
color: #000000;
text-decoration: none;
}
a:hover {
color: #00FF00;
text-decoration: underline overline;
}
div#content {
height: 100%;
width: 100%;
background-color: #FFFFFF;
}
I know that most of the css is in the page and not the external css but thats because i was modifying it heavily to see what would work and what wouldnt. The problem is the fixed width on the side menu as it wont be consistent across different screen resolutions. any help would be much appreciated as i dont want to continue work on this page until i can figure this problem out. Hi, If I have Code:
#parent {
background-color: red;
padding: 2px;
margin: 2px;
}
#child1 {
float: left;
}
#child2 {
float: left;
}
</style>
<div id="parent">
<div id="child1">
Some text
</div>
<div id="child2">
Some text 2
</div>
</div>
Then the two child divs will appear underneath the parent one, whereas I want the background from the parent one to be the backdrop for the two child divs. if I remove float: left then they appear in it, but underneath each other. I want them side by side. Is this possible with css? I've used divs before and got them to work just fine. I've read previous posts and can't find the answer I'm looking for because it seems so basic. But here is my problem. I simply can't get the divisions to float left or right. They just sit on top of one another. Here is my style sheet code: Code: #container
{
margin: 0px;
padding: 0px;
width: 800px;
}
#header
{
margin: 0px;
padding: 0px;
background-color: Blue;
}
#menu
{
background-color: Gray;
float: left;
margin: 0px;
padding: 0px;
width: 140px;
}
#content
{
float: right;
margin: 0px;
padding: 0px;
width: 650px;
}
#footer
{
margin: 0px;
padding: 0px;
width: 800px;
}
and my HTML: Code: <div id="container">
<div id="header" align="center">
<!-- #INCLUDE VIRTUAL="includes/example_header.aspx" -->
</div>
<div id="midsection" align="center">
<div id="menu">
<!-- #INCLUDE VIRTUAL="includes/example_menu.aspx" -->
</div>
<div id="content">
<!-- #INCLUDE VIRTUAL="includes/example_common_content.aspx" -->
<p>
Garbage.
</p>
</div>
</div>
<div id="footer" align="center">
<!-- #INCLUDE VIRTUAL="includes/example_footer.aspx" -->
</div>
</div>
Thanks in advance for your help. |
|||||||