Here's what I'm looking to do: fixed left column and a right column
that fills the remainder of the space. I need the ability to position
other elements relative to the borders of the right column. Without
nesting containers, here's the best cross-browser version I could come
up with: http://www.singley.org/test/two_cols2.html
I see what's wrong - the right column is getting offset by the left
column which pushes the viewport out 200px to the right. But I
couldn't figure out a way to get the widths to work and for my square
box to position relative to the edges of the right container.
I eventually settled on this, which works and uses nested DIVs: http://www.singley.org/test/two_cols1.html
So, mostly for my own learning, I'd like to know how to implement this
layout without the nested DIV design.
Thanks,
~ E 1 2105
ChitownE wrote: Here's what I'm looking to do: fixed left column and a right column that fills the remainder of the space. I need the ability to position other elements relative to the borders of the right column. Without nesting containers, here's the best cross-browser version I could come up with:
http://www.singley.org/test/two_cols2.html
I see what's wrong - the right column is getting offset by the left column which pushes the viewport out 200px to the right. But I couldn't figure out a way to get the widths to work and for my square box to position relative to the edges of the right container.
I eventually settled on this, which works and uses nested DIVs:
http://www.singley.org/test/two_cols1.html
So, mostly for my own learning, I'd like to know how to implement this layout without the nested DIV design.
#left{
float:left;
width:200px;
background-color: #eee;
height:300px;
}
#right{
margin-left:200px;
position:relati ve;
background-color: #333;
height:300px;
}
#positioned-item{
position:absolu te;
top:50px;
left:50px;
height: 30px;
width: 30px;
border: 1px solid red;
background-color: #fcf;
}
<div id="left">
</div>
<div id="right">
<div id="positioned-item"> </div>
</div>
I don't know why you want to position that item that way, a better set
of stylerules for that same html would be:
#left{
float:left;
width:200px;
background-color: #eee;
height:300px;
}
#right{
margin-left:200px;
border:1px solid
background-color: #333;
border:1px solid #333; /* to keep margins of content inside */
height:300px;
}
#positioned-item{
height: 30px;
width: 30px;
border: 1px solid red;
background-color: #fcf;
margin-left:49px;
margin-top:49px;
}
Not tested (2x).
--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Now playing: Electric Boys - Dying To Be Loved This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics |
by: SoloCDM |
last post by:
How do I keep my entire web page at a fixed width?
*********************************************************************
Signed,
SoloCDM
|
by: Mason A. Clark |
last post by:
Masters:
On two or three-column layouts, one column often has a list
of links. Scrolling the page hides them. I'm aware there's
supposed to be the ability to fix the column (frame-like).
I have some bits of such code but haven't yet made it
work well.
Question: Why have I never seen an example on the web?
Not that I've seen everything, but I've seen numerous pages
|
by: Frances Del Rio |
last post by:
don't know if I'll succeed, have spent a lot of time already trying to
figure this out: I would like to position a footer (co. name, address,
etc..) at the bottom of browser page, in such a way that it's always at
the bottom no matter how high the screen is ('clientHeight' in browser
model) and that stays there when user scrolls.. in the "official" CSS
specif's (http://www.w3.org/TR/REC-CSS2/visuren.html#fixed-positioning)
I found this:...
|
by: oj |
last post by:
Please, bare with me. I'm new to CSS and would like to ask for some
advice on my current project. I have an existing table based layout
that serves as the main template for a .Net application I've been
working with. I would like to convert this layout to css based liquid
design. I would like the pages to stretch both horizontally and
vertically as needed. The layout needs to consist of a Pre-Header area
that stretches across the entire...
|
by: Michael Schuerig |
last post by:
I'm trying to do something seemingly very simple, but it's brought me
close to crushing my head on the keyboard. All I want is a table where
the head row is fixed and the body columns below are scrollable (with
the ordinary scrollbars, no less). Whatever I try, the columns in the
head and the body aren't aligned; the widths are computed independently
which gives a completely ragged look.
Michael
--
| |
by: Eric Lindsay |
last post by:
What problems are there in using position: fixed; with left: %; and
right: %; to do pages that look like a typical boring framed site. A
full width header and a footer and the rest of the content between them.
A narrow left (and/or right) navigation column, plus a main body taking
the rest of the width?
I was reading http://www.w3.org/TR/CSS21/visuren.html where one example
uses fixed. When I tried it (with empty mostly empty divs for...
|
by: Eric Lindsay |
last post by:
I hope someone can help, before I start thinking tables have a lot of
merit after all.
I am trying to achieve a two column layout, with source code div order
main content, right side navigation, footer. Naturally I want liquid
main contents, and I have float: right; img, and clear: both; paragraphs
in the main contents div.
Fixed width right navigation column is probably essential. There is a
confounded logo graphic to go at the top...
|
by: Sarita |
last post by:
Hello,
this might sound stupid, but I got a really nice homepage template
which unfortunately is a 3-Column Fixed Width CSS format. Now I don't
have any content for the right column and would like the middle column
just to use up that space instead.
Any way this is possible?
Thanks for your help, it is highly appreciated!
|
by: chathura86 |
last post by:
hi,
i want to have tow column in my design (divide the page in to two parts)
where i want left column to be liquid while the right column has the width of
200px so when the window re size only the left column will change to fit the
screen.
Please help on this
|
by: marktang |
last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look !
Part I. Meaning of...
|
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: jinu1996 |
last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth.
The Art of Business Website Design
Your website is...
|
by: tracyyun |
last post by:
Dear forum friends,
With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
|
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: muto222 |
last post by:
How can i add a mobile payment intergratation into php mysql website.
| |
by: bsmnconsultancy |
last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...
| |