PDA

View Full Version : Aligning divs with css



funsize999
Mar 18th, 2010, 12:29 PM
Hi,

This is what I want my website to look like (boxes are labelled as their div id's)

http://i40.tinypic.com/2wrnk8z.png

but this is what it actually looks like

http://i43.tinypic.com/2v325n9.png

Here's the html and css document (I can't edit the html file since it's an assignment)


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title> Welcome to the Centre for Language Technology </title>
<link rel="stylesheet" type="text/css" href="clt.css">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>

<body>

<div id="container">



<div id="header">
<h1> <span class="clt">Centre for <span class="lt">Language Technology</span></span> </h1>
</div>


<div id="menu">
<ul>
<li><a href="#">Macquarie Home</a></li>

<li><a href="#">Course Handbook</a></li>
<li><a href="#">Library</a></li>
<li><a href="#">Campus Map</a></li>
<li><a href="#">Macquarie Contacts</a></li>
<li><form id="query-form" name="query-form" action="" method="get">
<span id="search">Search Site:</span>
<input id="query-box" name="q" value="" size="20">
<input type="submit" value="Submit">

</form></li>
</ul>
</div>


<div id="content-container">

<div id="index">
<ul>
<li><a href="#"><span class="clt-abbrev">CLT</span> Home</a></li>

<li><a href="#">Information</a></li>
<li><a href="#">Teaching</a></li>
<li><a href="#">Research</a></li>
<li><a href="#">People</a></li>
</ul>
</div>

<div id="content">

<div id="research-center">
<h2> <span class="clt">Centre for <span class="lt">Language Technology</span></span> </h2>

<p>Located in Sydney, Australia, Macquarie University's <span class="clt">
Centre for <span class="lt">Language Technology</span></span> (<span class="clt-abbrev">CLT</span>)
is Australasia's largest and longest-established body of researchers working in
natural language processing, computational linguistics and language technology.
We have a well-developed infrastructure for carrying out research and teaching
in these areas, and welcome approaches from students or visitors interested in
working with us. We also frequently have employment opportunities available on
research projects.</p>

</div>

<div id="events">
<h3> <span class="clt-abbrev">CLT</span> Events </h3>

<p>The <span class="clt-abbrev">CLT</span> holds weekly discussion seminars with
speakers drawn from amongst the group members and visiting researchers - all
students are invited to join these meetings. Seminars usually take place on
<span id="day">Mondays</span> at <span id="time">11am</span> in
<span id="building">Building E6A</span>, <span id="room">Room 202</span>.</p>


<table id="table-events">
<thead>
<tr>
<th>Date</th>
<th>Speaker</th>
<th>Topic</th>
</tr>

</thead>
<tbody>
<tr>
<td>February 22</td>
<td>Diego Molla </td>
<td>NLP Challenges for Evidence Based Medicine</td>
</tr>

<tr class="alt">
<td>March 1</td>
<td>Ben Hachey </td>
<td>Explainable Text Mining </td>
</tr>
<tr>
<td>March 8 </td>

<td>Mark Johnson </td>
<td>Parsing Speech Corpora </td>
</tr>
<tr class="alt">
<td>March 15</td>
<td>Robert Dale </td>
<td>Automating Proofreading </td>

</tr>
<tr>
<td>March 22</td>
<td>Pawel Mazur </td>
<td>Processing Temporal Expressions </td>
</tr>
<tr class="alt">

<td>March 29</td>
<td>Matthew Honnibal </td>
<td>Exploiting Morphology in English Statistical Parsing </td>
</tr>
<tr>
<td>April 5 </td>
<td>Ilya Anisimoff </td>

<td>Hesitation Modelling </td>
</tr>
<tr class="alt">
<td>April 12</td>
<td>Andrew Lampert </td>
<td>Detecting Emails Containing Requests for Action Speaker </td>
</tr>

</tbody>
</table>
</div>


<div id="research-area">
<h3> What is <span class="lt">Language Technology</span>? </h3>

<p><span class="lt">Language Technology</span> (<span class="lt-abbrev">LT</span>) is
the late 1990s outgrowth of 40 years of research
into natural language processing, a subfield of artificial intelligence.
<span class="lt-abbrev">LT</span> is concerned with the computational processing of
human language, whether
in spoken or written form, and with the dual aims of easing both interaction
with machines and the processing of large amounts of textual information. This
translates into applications such as spoken language dialog systems, intelligent
Internet search engines, machine translation and automatic text summarisation.</p>

<p><span class="lt">Language Technology</span> is widely recognised as constituting
the next major challenge for computing:</p>

<ul>

<li>With the business desktop saturated, the ability to communicate easily with
intelligent handheld devices and appliances in the home becomes a priority.
This requires sophisticated natural language processing as well as speech
recognition. </li>
<li>At the same time, business desktop users need language technology too: for
example, the explosion of information on the Internet requires sophisticated
techniques for processing text and documents to extract meaning.</li>
</ul>

<p>These drivers make language technology a critical technology for the 21st century.</p>
</div>


<div id="info-research-area">

<h3> Further Information about <span class="lt">Language Technology</span> </h3>

<p>To find out more about <span class="lt">Language Technology</span>, a good place
to start is by browsing this site. You can also consult the following:</p>

<ul>
<li>A leaflet about
<a href="http://web.science.mq.edu.au/files/file/CLT/CLTLeaflet.pdf"><span class="lt">

Language Technology</span></a>,
its applications, and the undergraduate units on offer by the <span class="clt">Centre for
<span class="lt">Language Technology</span></span>.</li>
<li>The site of the Australasian Language Technology Association
(<a href="http://www.alta.asn.au/">ALTA</a>). It contains a mailing list and further
information about language technology in Australia and New Zealand.</li>
<li>A <a href="http://cslu.cse.ogi.edu/HLTsurvey/HLTsurvey.html">Survey of the State of
the Art in Human Language Technology</a>. You can get a feel for the broad range of
issues addressed in language technology research by browsing the contents of this
online survey.</li>

</ul>
</div>


<div id="comments">
<p>We hope you find our web site interesting and useful. If you have any comments, please
<a href="mailto:[email protected]">mail us</a>.</p>
</div>

</div> <!-- close div id="content" -->


<div id="news">
<h3>News</h3>

<div id="news-intro">
<p>Got some news about <span class="lt">Language Technology</span>?</p>
<p><a href="mailto:[email protected]">Let us know</a>!</p>
</div>

<div class="news-item">
<h4> 22/02/2010 </h4>

<p>Ben Hachey is co-organising the <span class="conference">NAACL 2010</span>
workshop <span class="workshop">Computational Linguistics
in a World of Social Media</span>, Los Angeles, 5-6 June.</p>

</div>

<div class="news-item">
<h4> 20/02/2010 </h4>

<p>Jette Viethen, Simon Zwarts and Robert Dale have a paper accepted at
<span class="conference">LREC2010</span>, Malta,
17-23 May, with title <span class="paper">Dialogue Reference in a Visual Domain</span>.</p>

</div>

<div class="news-item">
<h4> 27/01/2010 </h4>

<p>Andrew Lampert, Robert Dale and Cecile Paris have a paper accepted at
<span class="conference">NAACL 2010</span>,
Los Angeles, 2-4 June.</p>
</div>

<div class="news-item">
<h4> 26/01/2010 </h4>

<p>Mark Johnson, previously of Brown University, has joined Macquarie&rsquo;s Centre
for Language Technology as of the beginning of 2010. Drop by to a Monday morning
group meeting and say hello!</p>
</div>
</div> <!-- close div id="news" -->

</div> <!-- close div id="content-container" -->

<div id="footer">
&copy; <span class="clt">Centre for <span class="lt">Language Technology</span></span>,
Macquarie University, 2010
</div>

</div> <!-- close div id="container" -->

</body>
</html>



/*<ul>, <li> and <a> definitions inspired by w3schools floating navbar, http://www.w3schools.com/css/tryit.asp?filename=trycss_navbar_horizontal_float_advanced*/
/*image source = http://www.clker.com/clipart-15109.html*/

body{
background-color:#090909;
color: #FFFFFF;
font-family: Arial, Trebuchet MS, sans-serif;
margin-left: 1.5em;
margin-right: 1.5em;
display: block;
}

p{
text-align: justify;
}

td{
padding-right: 5px;
}

#query-form{
position: absolute;
top: 13em;
left: 2em;
}

#menu ul, #index ul{
width: 285;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}

#menu li, #index li{
border: 3px ridge #969696;
}

#menu a:link, #menu a:visited, #index a:link, #index a:visited{
display: block;
font-weight: bold;
color: #FFFFFF;
text-align: center;
padding-top:15px;
padding-bottom: 15px;
text-decoration: underline;
text-transform: uppercase;
}

#menu a:hover, #menu a:active, #index a:hover, #index a:active{
background-color: #7A991A;
text-decoration: none;
}

#info-research-area li, #research-area li{
text-align: justify;
}

#header h1{
padding-top: 45px;
}

#header{
font-family: Lucida Console, Courier, Monotype;
color: #00FF00;
text-align: center;
height: 123px;
background: url(http://i42.tinypic.com/33o00sm.png) repeat-x center center; /*original image: http://www.clker.com/clipart-15109.html*/
}

#menu{
background-color: #C0C0C0;
width: 285px;
font-size: 12px;
margin-top: 2.5em;
}

#index{
margin-top: -6px;
background-color: #C0C0C0;
width: 285px;
font-size: 12px;
}

#container{
float: left;
}

#content{
float: right;
width: 80%;
}

#research-center{
position: absolute;
top: 8.5em;
float: left;
width: 45%;
padding-right: 10px;
}

#research-area{
float: left;
width: 45%;
}

#info-research-area{
width: 45%;
}

#events{
position: absolute;
top: 8.5em;
right: 1.5em;
float: right;
width: 30%;
}

#news{
float: right;
width: 30%;
}

I'm guessing it has to do with all the floats, but I just can't see how I can fix it. I was originally just going to use position: relative on the right and left sides and have the middle liquid, but since the right and center are contained within the one div I can't see how I can get that to work. I tried absolute positioning as well, but as you can see from the diagram that didn't work out too well. I've tested this in 1920x1080 solution which is what you see in the second picture, but when I tested it in 1024x768, the middle content overflowed onto the navbar.

I know the navbar is really wide, but the search bar is 285px, so the navbar had to be that wide as well :/

So thanks in advance for any help!

Excavator
Mar 18th, 2010, 06:26 PM
Hello funsize999,
There was no easy way to explain how to fix this...
The way you've got it is sort haphazard, there are elements in the markup that are out of their container, absolute positioning, things that should be floated and not, things that are floated but shouldn't be...

Have a look at this approach. You may want to adjust the width of the 2 columns in #content-container to your liking. You may also want to add a min-width to stop it all from closing down too far.
It's far from done but maybe it will give you a good start.

markup -
<!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> Welcome to the Centre for Language Technology </title>
<link rel="stylesheet" type="text/css" href="clt.css">
</head>
<body>
<div id="container">
<h1 id="header"> <span class="clt">Centre for <span class="lt">Language Technology</span></span> </h1>
<div id="menu">
<form id="query-form" name="query-form" action="" method="get">
<span id="search">Search Site:</span>
<input id="query-box" name="q" value="" size="20">
<input type="submit" value="Submit">
</form>
<ul>
<li><a href="#">Macquarie Home</a></li>
<li><a href="#">Course Handbook</a></li>
<li><a href="#">Library</a></li>
<li><a href="#">Campus Map</a></li>
<li><a href="#">Macquarie Contacts</a></li>
</ul>
<ul id="index">
<li><a href="#"><span class="clt-abbrev">CLT</span> Home</a></li>
<li><a href="#">Information</a></li>
<li><a href="#">Teaching</a></li>
<li><a href="#">Research</a></li>
<li><a href="#">People</a></li>
</ul>
<!--end menu--></div>
<div id="content-container">
<div id="research-center">
<h2> <span class="clt">Centre for <span class="lt">Language Technology</span></span> </h2>
<p>Located in Sydney, Australia, Macquarie University's <span class="clt">
Centre for <span class="lt">Language Technology</span></span> (<span class="clt-abbrev">CLT</span>)
is Australasia's largest and longest-established body of researchers working in
natural language processing, computational linguistics and language technology.
We have a well-developed infrastructure for carrying out research and teaching
in these areas, and welcome approaches from students or visitors interested in
working with us. We also frequently have employment opportunities available on
research projects.
</p>
<!--end research-center--></div>
<div id="research-area">
<h3> What is <span class="lt">Language Technology</span>? </h3>
<p>
<span class="lt">Language Technology</span> (<span class="lt-abbrev">LT</span>) is
the late 1990s outgrowth of 40 years of research
into natural language processing, a subfield of artificial intelligence.
<span class="lt-abbrev">LT</span> is concerned with the computational processing of
human language, whether
in spoken or written form, and with the dual aims of easing both interaction
with machines and the processing of large amounts of textual information. This
translates into applications such as spoken language dialog systems, intelligent
Internet search engines, machine translation and automatic text summarisation.
</p>
<p>
<span class="lt">Language Technology</span> is widely recognised as constituting
the next major challenge for computing:
</p>
<ul>
<li>
With the business desktop saturated, the ability to communicate easily with
intelligent handheld devices and appliances in the home becomes a priority.
This requires sophisticated natural language processing as well as speech
recognition.
</li>
<li>
At the same time, business desktop users need language technology too: for
example, the explosion of information on the Internet requires sophisticated
techniques for processing text and documents to extract meaning.
</li>
</ul>
<p>These drivers make language technology a critical technology for the 21st century.</p>
<!--end research-area--></div>
<div id="info-research-area">
<h3> Further Information about <span class="lt">Language Technology</span></h3>
<p>
To find out more about <span class="lt">Language Technology</span>, a good place
to start is by browsing this site. You can also consult the following:
</p>
<ul>
<li>
A leaflet about
<a href="http://web.science.mq.edu.au/files/file/CLT/CLTLeaflet.pdf"><span class="lt">
Language Technology</span></a>,
its applications, and the undergraduate units on offer by the <span class="clt">Centre for
<span class="lt">Language Technology</span></span>.
</li>
<li>
The site of the Australasian Language Technology Association
(<a href="http://www.alta.asn.au/">ALTA</a>). It contains a mailing list and further
information about language technology in Australia and New Zealand.
</li>
<li>
A <a href="http://cslu.cse.ogi.edu/HLTsurvey/HLTsurvey.html">Survey of the State of
the Art in Human Language Technology</a>. You can get a feel for the broad range of
issues addressed in language technology research by browsing the contents of this
online survey.
</li>
</ul>
<!--end info-research-area--></div>
<div id="events">
<h3> <span class="clt-abbrev">CLT</span> Events </h3>
<p>
The <span class="clt-abbrev">CLT</span> holds weekly discussion seminars with
speakers drawn from amongst the group members and visiting researchers - all
students are invited to join these meetings. Seminars usually take place on
<span id="day">Mondays</span> at <span id="time">11am</span> in
<span id="building">Building E6A</span>, <span id="room">Room 202</span>.
</p>

<table id="table-events">
<thead>
<tr>
<th>Date</th>
<th>Speaker</th>
<th>Topic</th>
</tr>

</thead>
<tbody>
<tr>
<td>February 22</td>
<td>Diego Molla </td>
<td>NLP Challenges for Evidence Based Medicine</td>
</tr>

<tr class="alt">
<td>March 1</td>
<td>Ben Hachey </td>
<td>Explainable Text Mining </td>
</tr>
<tr>
<td>March 8 </td>

<td>Mark Johnson </td>
<td>Parsing Speech Corpora </td>
</tr>
<tr class="alt">
<td>March 15</td>
<td>Robert Dale </td>
<td>Automating Proofreading </td>

</tr>
<tr>
<td>March 22</td>
<td>Pawel Mazur </td>
<td>Processing Temporal Expressions </td>
</tr>
<tr class="alt">

<td>March 29</td>
<td>Matthew Honnibal </td>
<td>Exploiting Morphology in English Statistical Parsing </td>
</tr>
<tr>
<td>April 5 </td>
<td>Ilya Anisimoff </td>

<td>Hesitation Modelling </td>
</tr>
<tr class="alt">
<td>April 12</td>
<td>Andrew Lampert </td>
<td>Detecting Emails Containing Requests for Action Speaker </td>
</tr>

</tbody>
</table>
<!--end events--></div>
<div id="news">
<h3>News</h3>
<div id="news-intro">
<p>Got some news about <span class="lt">Language Technology</span>?</p>
<p><a href="mailto:[email protected]">Let us know</a>!</p>
</div>
<div class="news-item">
<h4> 22/02/2010 </h4>
<p>
Ben Hachey is co-organising the <span class="conference">NAACL 2010</span>
workshop <span class="workshop">Computational Linguistics
in a World of Social Media</span>, Los Angeles, 5-6 June.
</p>
</div>
<div class="news-item">
<h4> 20/02/2010 </h4>
<p>
Jette Viethen, Simon Zwarts and Robert Dale have a paper accepted at
<span class="conference">LREC2010</span>, Malta,
17-23 May, with title <span class="paper">Dialogue Reference in a Visual Domain</span>.
</p>
</div>
<div class="news-item">
<h4> 27/01/2010 </h4>
<p>
Andrew Lampert, Robert Dale and Cecile Paris have a paper accepted at
<span class="conference">NAACL 2010</span>,
Los Angeles, 2-4 June.
</p>
</div>
<div class="news-item">
<h4> 26/01/2010 </h4>
<p>
Mark Johnson, previously of Brown University, has joined Macquarie&rsquo;s Centre
for Language Technology as of the beginning of 2010. Drop by to a Monday morning
group meeting and say hello!
</p>
</div>
</div> <!-- close div id="news" -->
<div id="comments">
<p>
We hope you find our web site interesting and useful. If you have any comments, please
<a href="mailto:[email protected]">mail us</a>.
</p>
<!--end comments--></div>
</div> <!-- close div id="content-container" -->
<div id="footer">
&copy; <span class="clt">Centre for <span class="lt">Language Technology</span></span>,
Macquarie University, 2010
</div>
</div> <!-- close div id="container" -->
</body>
</html>

and the new CSS -
html, body{
background: #090909;
color: #fff;
font: 100% Arial, "Trebuchet MS", sans-serif;
}
#container{
margin: 0 1.5em;
overflow: auto;
font-size: 1em;
}
h1#header {
margin: 0 0 2.5em;
line-height: 123px;
font-family: Lucida Console, Courier, Monotype;
color: #00FF00;
text-align: center;
background: url(http://i42.tinypic.com/33o00sm.png) repeat-x center center; /*original image: http://www.clker.com/clipart-15109.html*/
}
#menu {
width: 285px;
float: left;
background: #C0C0C0;
}
#query-form{
width: 285px;
margin: 0 0 1.5em;
font-size: 0.7em;
}
#menu ul, ul#index {
width: 285px;
list-style-type: none;
margin: 1.5em 0 0 0;
padding: 0;
overflow: hidden;
}
#menu ul li, ul#index li {border: 3px ridge #969696;}

#menu ul li a:link, #menu ul li a:visited,
ul#index li a:link, ul#index li a:visited {
display: block;
font-weight: bold;
color: #FFFFFF;
text-align: center;
padding-top:15px;
padding-bottom: 15px;
text-decoration: underline;
text-transform: uppercase;
}
#menu ul li a:hover, #menu ul li a:active,
ul#index li a:hover, ul#index li a:active {
background-color: #7A991A;
text-decoration: none;
}
#content-container {
margin: 0 0 0 300px;
overflow: auto;
text-align: justify;
}
#research-center, #research-area,
#info-research-area {
width: 60%;
float: left;
clear: left;
}
#news, #events, #comments {
margin: 0 0 0 60%;
padding: 0 0 0 15px;
}
p {text-align: justify;}

td {padding-right: 5px;}

td {padding-right: 5px;}

That puts

your site in a full width #container with right/left margins
a 285px wide floated left menu column and a #content-container that take the remaining width and is margined over to allow for the menu column
in #content-container is 2 more columns - groups of them really, some floated left and the right ones margined over

abduraooft
Mar 18th, 2010, 06:35 PM
Or just have a look at http://bonrouge.com/3c-hf-fluid.php