TheServant 1,168
Recognized Expert Top Contributor
Hey guys,
I am trying to get my page to be 3 columns, with a liquid center one.
The CSS concerned is: - div.container {
-
width: 100%;
-
margin: 0 auto;
-
border: 0px;
-
}
-
div.center_content {
-
background-color:#0033FF;
-
position: relative;
-
left: 200px;
-
float: left;
-
}
-
div.left_content {
-
background-color:#770000;
-
width: 200px;
-
left: 0;
-
position: relative;
-
float: left;
-
}
-
div.right_content {
-
background-color:#7733FF;
-
width: 200px;
-
right: 0;
-
position: relative;
-
float: right;
The html:
[HTML]<div class="containe r">
<div class="left_con tent">
<p>Left Content</p>
<some code />
</div>
<div class="center_c ontent">
<p>Center Content</p>
<some code />
</div>
<div class="right_co ntent">
<p>Right Content</p>
<some code />
</div>
</div>[/HTML]
Basically I want the middle column to fill all the space between the left and right (fixed-width) columns, but I can't seem to get the CSS right for center_content.
7 1432
Your always going to get this problem unless you use fixed sizes for everything.
Either use pixels as the measure or percent. not both.
heres two style for youto see what i mean - div.container {
-
width: 800px;
-
margin: 0 auto;
-
border: 0px;
-
}
-
div.center_content {
-
background-color:#0033FF;
-
width: 600px;
-
float: left;
-
}
-
div.left_content {
-
background-color:#770000;
-
width: 200px;
-
float: left;
-
}
-
div.right_content {
-
background-color:#7733FF;
-
width: 200px;
-
float: left;
-
}
- div.container {
-
width: 100%;
-
margin: 0 auto;
-
border: 0px;
-
}
-
div.center_content {
-
background-color:#0033FF;
-
width: 60%;
-
float: left;
-
}
-
div.left_content {
-
background-color:#770000;
-
width: 20%;
-
float: left;
-
}
-
div.right_content {
-
background-color:#7733FF;
-
width: 20%;
-
float: left;
-
}
TheServant 1,168
Recognized Expert Top Contributor
This guy has done it, but I want to know why you need all the container div's: Holy Grail 3
His CSS goes like: - .holygrail {
-
background:#FFFF99 none repeat scroll 0%;
-
}
-
.holygrail .colmid {
-
background:#FFFFFF none repeat scroll 0%;
-
float:left;
-
margin-left:-200px;
-
position:relative;
-
right:100%;
-
width:200%;
-
}
-
.holygrail .colleft {
-
background:#FFD8B7 none repeat scroll 0%;
-
float:left;
-
left:400px;
-
margin-left:-50%;
-
position:relative;
-
width:100%;
-
}
-
.holygrail .col1wrap {
-
float:left;
-
padding-bottom:1em;
-
position:relative;
-
right:200px;
-
width:50%;
-
}
-
.holygrail .col1 {
-
left:200%;
-
margin:0pt 215px;
-
overflow:hidden;
-
position:relative;
-
}
-
.holygrail .col2 {
-
float:right;
-
position:relative;
-
right:15px;
-
width:170px;
-
}
-
.holygrail .col3 {
-
float:right;
-
left:50%;
-
margin-right:45px;
-
position:relative;
-
width:170px;
-
}
His html:
[HTML]<div class="colmask holygrail">
<div class="colmid">
<div class="colleft" >
<div class="col1wrap ">
<div class="col1">
{..code..}
</div>
</div>
<div class="col2">
{..code..}
</div>
<div class="col3">
{..code..}
</div>
</div>
</div>
[/HTML]
Though CSS is the best way to layout a page, when you go for general-purpose and ultimate flexibility, everything must be accounted for. And when you have to include all the "IE fixing", the markup can get pretty big.
iow, a baby's gotta do what a baby's gotta do! (Who can tell me what that line is from?) :)
sounds like something tommy would say from rugrats.
Your favorite show, too?! :)
TheServant 1,168
Recognized Expert Top Contributor
OK, so all that is necessary. I thought so, but hoped I could find a way to get by the fixes. Thanks for you help guys.
Markus 6,050
Recognized Expert Expert
Your favorite show, too?! :)
I absolutely hated angelica.
Always thwarting tommy n the gangs plans.
>=[
Sign in to post your reply or Sign up for a free account.
Similar topics |
by: Nathan |
last post by:
Hi,
I seem to having a peculiar problem with the display of odd and even
pages in XSL-FO. Here is a small background of the problem.
My xsl stylesheet mentions my fo:layout-master-set as
<fo:layout-master-set>
<fo:simple-page-master margin-left="0.5in" margin-right="0.5in"
page-width="8.5in" margin-bottom="0.5in" master-name="Section-odd-page"
margin-top="0.5in" page-height="14in">
<fo:region-after region-name="xsl-region-after-odd"
|
by: Shravan |
last post by:
Hi,
I saw that in Windows Forms DataGrid with new row
creation set to true, if I have added a new row earlier
which was empty and deleted the row and shifted the focus
to any other control and then clicking on the column
header of the grid is making the grid to go to edit mode
which is causing the first row to be ready for allowing
user input. Does anybody of you know how to stop this
behaviour, i.e., new row should not be put into edit...
|
by: Stephan Bour |
last post by:
Hi,
I have a datagrid databound to a SQL query. I'd like to allow editing of
some columns but not all. Is there a way to turn off the conversion of the
datagrid cells to textboxes for some columns when the Edit button is
pressed?
Thank you,
Stephan.
|
by: Michael |
last post by:
Need some help trying to read values from web controls - specifically
*finding* the controls (like a drop down list) - that are added
dynamically added within an asp:panel control.
The page contains multiple panels within the form. The panels appear
at different times - for our argument, let's say panel 1 appears
first, users clicks a submit button and then
panel 1 disappears and panel 2 appears, etc.
When clicks on the submit button...
|
by: tshad |
last post by:
I have a datagrid that I want to add a new column to. This column will only
be visible under certain conditions. So I want to set the column
visible=false. Then when the right condition happens to change it to
visible=true.
You can't do that with a bound column (no ID), but you can create a
templatecolumn with a label.
To make these visible, I am going through each datagriditem and making them
visible after I have bound the data to...
| |
by: meltedown |
last post by:
I have 2 left floating divs on a page. Sometime the left side is larger,
sometimes the right side is larger. I want the page to have a margin at
the bottom of whichever div is the largest.
If I put a bottom margin on one of the divs, it might not be the largest
div, in which case the margin won't show up. If I put the margin on both
divs, when the right floats below the left side in a small window, there
is too much margin between the...
|
by: Miguel Dias Moura |
last post by:
Hello,
I have a GridView in my page which is created in runtime. It works fine.
My page has 2 Asp Buttons:
- The HIDE button makes GridView.Visible = False;
- The SHOW button makes GridView.Visible = True.
I press HIDE and the GridView disappears as expected.
After it I press SHOW and the GridView doesn't show.
|
by: karen987 |
last post by:
I have a news website, with asp pages. It has publishing software which allows you to add articles in a database, and then calls them up from links etc. I have added dynamic meta tags in 2 parts. The first part is in the inc.header.asp file which is called up on every page. The page itself has the meta tag variable, ie. title, description. They work fine on all pages, except the one below i'm having problems with. Ironically it's the most...
|
by: jc |
last post by:
Hello.
I have a gridview column item that i want to not make visible if the
bound data in that cell is less than a value in a textbox.
However, I notice at the time my code checks a function that I call
from the visible property of the gridview itemtemplate, the textbox is
always blank.
I tried setting the textbox in the prerender, but I suspect the
|
by: Hystou |
last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it.
First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
|
by: Oralloy |
last post by:
Hello folks,
I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>".
The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed.
This is as boiled down as I can make it.
Here is my compilation command:
g++-12 -std=c++20 -Wnarrowing bit_field.cpp
Here is the code in...
| |
by: Hystou |
last post by:
Overview:
Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
|
by: agi2029 |
last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own....
Now, this would greatly impact the work of software developers. The idea...
|
by: conductexam |
last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one.
At the time of converting from word file to html my equations which are in the word document file was convert into image.
Globals.ThisAddIn.Application.ActiveDocument.Select();...
|
by: TSSRALBI |
last post by:
Hello
I'm a network technician in training and I need your help.
I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs.
The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols.
I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
|
by: adsilva |
last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
|
by: 6302768590 |
last post by:
Hai team
i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
| |
by: muto222 |
last post by:
How can i add a mobile payment intergratation into php mysql website.
| |