/    Sign up×
Community /Pin to ProfileBookmark

positioning of divs with specific widths

Copy linkTweet thisAlerts:
Apr 30.2007

hi,

I cant seem to figure out what css I need to solve my problem. I can do it with absolute positioning, but for other reasons, absolute positioning wont work in the grand scheme of things. I’ll show you what it is I’m trying to do with my write up using the absolute positioning way… I have a div that is fluid in width and has two inline divs nested inside of it. I want the first nested div to have a fixed width, lets say 100px, and the other div (which holds a table) to fill the rest of the width in the parent div no matter how wide the browser is. here is the write up using absolute positioning:

[CODE]<div>

<div style=”position:absolute;left:0px;right:100px;background-color:blue;”>
<table width=”100%” border=”1″ cellspacing=”1″ cellpadding=”1″>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
</div>

<div style=”position:absolute;right:0px;width:100px;background-color:green;”>
Fixed width thing
</div>

</div>[/CODE]

so how should I do this without absolute positioning? I’m stumped for now.

to post a comment
CSS

2 Comments(s) ↴

Copy linkTweet thisAlerts:
@CentauriApr 30.2007 — If you declare the right fixed width div first in the html, it can be floated right. The other div then naturally sits in place with no more than a right margin.[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=utf-8">
<title>Untitled Document</title>
<style type="text/css">
<!--
.right_side {
float: right;
width: 100px;
background-color: #008000;
}
.left_side {
margin: 0 100px 0 0;
background-color: #0000FF;
}
-->
</style>
</head>

<body>
<div id="wrapper">
<div class="right_side">
Fixed width thing
</div>
<div class="left_side">
<table width="100%" border="1" cellspacing="1" cellpadding="1">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
</div>
</div>
</body>
</html>
[/CODE]

Note that I put the styles in there own section - I hate inline styles, sort of misses the point of css really.

Cheers

Graeme
Copy linkTweet thisAlerts:
@dave17authorApr 30.2007 — aha, the margin, I hadn't thought of that. that's perfect, thank you. ps I only used inline styles for the purpose of demonstrating the problem.
×

Success!

Help @dave17 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...