Help please!

ARRIVALS

ARRIVALS

Well-Known Member
Hi guys.

I have begun learning HTML/CSS recently and have a query re: paragraphs of text.

I want to set out 3 paragraphs next to each other side by side, as columns. Like you'd seen in a newspaper.

I've worked out how to position them where I want to, but that's only to a specific size window. When the window is made smaller or bigger, the text obviously moves with it. How would I go about fixing the text so the width wouldn't change, the positioning wouldn't change, so it'd be just stuck there?

I'm sure it's very simple, I'm just a complete beginner!

:icon_Wall:
 
Thanks for this. I think I've sorted it, but something weird is happening.

I now have 3 columns of text, on the left, middle and right.

The left column is perfect, sits where it needs to, doesn't move when the window is made thinner or wider. But the middle and right columns are acting weird. The top line of each of the middle and right columns won't stick to the initial paragraph width setting, but the rest of the paragraphs within those columns do!

What is strange is that every paragraph within each column has exactly the same html code before and after it, nothing is different, yet the top 2 lines of those particular 2 columns are acting funky.

What causes things like this to happen? Error in code?

Here's my current code by the way.. I'm a beginner so don't tear me a new one just yet!

<html>
<head>
<title>Arrivals</title>
<style type="text/css" title="mystyles" media="all">
<!--
body
{
background-image:url('wta1.jpg');
background-repeat:no-repeat;
}
body { color: #5d665b;
margin: 50px;
font-family: Helvetica, Verdana, Geneva, Arial, sans-serif;
font-size: x-small;
line-height: 120% }
h4 {color: #000000; font-family: Helvetica, Verdana, Geneva, Arial, sans-serif }

p.ex
{
width:220px;
}
-->
</style>
</head>
<body>
<div style="margin-left: 18px; margin-top: 190px;</div>
<p class="ex"><h4>Who are we?</h4></p>
<p class="ex">Arrivals is the home of Blackpool based graphic designer and illustrator, Ross Harrington.</p>
<p class="ex">Founded in mid 2011, Arrivals is driven by a passion for design and communication that has grown over 5 years of education and industry experience. </p>
<p class="ex">Arrivals is not a multi-national agency with the plushest office or the biggest ego - but who needs a luxury penthouse office anyway? Instead, we offer a closer, personal approach and because there is no middleman, you can talk directly to the designer working on your project every time.</p>
<p class="ex"><h4>What do we do?</h4></p>
<p class="ex">Here at Arrivals, the main focus of our work is branding - everything from strategy and conceptual development through to final design and communication. That being said, we are just as eager to design for all things print, web and particularly music.</p>
<p class="ex">We love happy clients, which is why we do all we can to offer a personal design solution to each and every need and requirement.</p>

<div style="margin-left: 275px; margin-top: -367px;</div>
<p class="ex">Here is a full list of things we can do for you, but even if you do not see what you are looking for, get in touch as we love a challenge.</p>
<p class="ex">Logos, brand identity, stationery, style guides, point of sale, product packaging, books, cd and dvd packaging, exhibition banners, brochures, leaflets, posters, flyers, signage, infographics, Flash animation, actionscript2.0 and 3.0.</p>
<p class="ex"><h4>Why should you work with us?</h4></p>
<p class="ex">We do not create eye-candy - unless asked to of course, we are simply problem solvers.</p>
<p class="ex">Each and every project is undertaken with keen enthusiasm and dedication to ensure all work has the desired effect, and communicates perfectly with the right people. </p>
<p class="ex">You'll always receive a friendly design service and every project is handled with care and attention. From first meeting to final delivery, no matter how small or large a project, you can be assured that every question will be answered and every problem solved.</p>
<p class="ex">We are easy to get on with, and love working closely with our clients. We love what we do, and want to share our passion, enthusiasm and creativity with people like you.</p>

<div style="margin-left: 275px; margin-top: -356;</div>
<p class="ex"><h4>We love the environment</h4></p>
<p class="ex">Arrivals love print, but also love trees, the environment and all things green and growing.</p>
<p class="ex">Where we are asked to handle the print side of a project, we believe that by sourcing high quality recycled materials from like-minded printers wherever possible, will result in something that not only looks good, but has been produced in the most environmentally friendly way as possible.</p>
<p class="ex"><h4>And finally..</h4></p>
<p class="ex">There you have it, a bit of information about who we are and what we do. You do not have to believe what we say of course, but here is what some of our clients have said about Arrivals and the work we have done with them.</p>
<p class="ex">If you would rather just see what we can do for you, take a look through our portfolio and judge for yourselves.</p>
<p class="ex">If you like what you have read, seen or heard, why not get in touch with us and we can chat about how we can help you.</p>
</div>
</body>
</html>
 
Last edited:
I think you have over-complicated it mate;

Code: 
<html>
<head>
<title>Arrivals</title>
<style type="text/css" title="mystyles" media="all">
<!--
body
{
background-image:url('wta1.jpg');
background-repeat:no-repeat;
}
body { color: #5d665b;
margin: 50px;
font-family: Helvetica, Verdana, Geneva, Arial, sans-serif;
font-size: x-small;
line-height: 120% }
h4 {color: #000000; font-family: Helvetica, Verdana, Geneva, Arial, sans-serif }
.column {width: 220px; float: left; padding: 10px;}
p {}
-->
</style>
</head>
<body>
<div class="column">
<h4>Who are we?</h4>
<p>Arrivals is the home of Blackpool based graphic designer and illustrator, Ross Harrington.</p>
<p>Founded in mid 2011, Arrivals is driven by a passion for design and communication that has grown over 5 years of education and industry experience. </p>
<p>Arrivals is not a multi-national agency with the plushest office or the biggest ego - but who needs a luxury penthouse office anyway? Instead, we offer a closer, personal approach and because there is no middleman, you can talk directly to the designer working on your project every time.</p>
<h4>What do we do?</h4>
Here at Arrivals, the main focus of our work is branding - everything from strategy and conceptual development through to final design and communication. That being said, we are just as eager to design for all things print, web and particularly music.</p>
We love happy clients, which is why we do all we can to offer a personal design solution to each and every need and requirement.</p>
</div><!-- \.column -->
<div class="column">
<p>Here is a full list of things we can do for you, but even if you do not see what you are looking for, get in touch as we love a challenge.</p>
<p>Logos, brand identity, stationery, style guides, point of sale, product packaging, books, cd and dvd packaging, exhibition banners, brochures, leaflets, posters, flyers, signage, infographics, Flash animation, actionscript2.0 and 3.0.</p>
<p><h4>Why should you work with us?</h4></p>
<p>We do not create eye-candy - unless asked to of course, we are simply problem solvers.</p>
<p>Each and every project is undertaken with keen enthusiasm and dedication to ensure all work has the desired effect, and communicates perfectly with the right people. </p>
<p>You'll always receive a friendly design service and every project is handled with care and attention. From first meeting to final delivery, no matter how small or large a project, you can be assured that every question will be answered and every problem solved.</p>
<p>We are easy to get on with, and love working closely with our clients. We love what we do, and want to share our passion, enthusiasm and creativity with people like you.</p>
</div><!-- \.column -->
<div class="column">
<h4>We love the environment</h4>
<p>Arrivals love print, but also love trees, the environment and all things green and growing.</p>
<p>Where we are asked to handle the print side of a project, we believe that by sourcing high quality recycled materials from like-minded printers wherever possible, will result in something that not only looks good, but has been produced in the most environmentally friendly way as possible.</p>
<h4>And finally..</h4>
<p>There you have it, a bit of information about who we are and what we do. You do not have to believe what we say of course, but here is what some of our clients have said about Arrivals and the work we have done with them.</p>
<p>If you would rather just see what we can do for you, take a look through our portfolio and judge for yourselves.</p>
<p>If you like what you have read, seen or heard, why not get in touch with us and we can chat about how we can help you.</p>
</div><!-- \.column -->
</body>
</html>

You had header tags wrapped in paragraphs which is not semantically correct. Also you were trying to use hefty margins to line it all up when floating elements brings them all up in line.

Don't forget your live page will need a doctype!
 
Cheers, I know about the doctype, I've been writing it in TextEdit so I'll add it at the end. I've just been trying to put bits and pieces from tutorials together to get something I want. I realise it's probably not the neatest way to go about things, but until I learn it properly, I'm just getting to grips with what each bit of code does.

Any ideas re: the annoying issue with the top line of the centre and right paragraphs? I can't figure it out.
 
Did you try my code? I didn't just copy yours I re-did it :icon_smile:

Also, you create your HTML to a certain doctype/standard so it is best to start with one :icon_wink:
 
Oh thanks, I just tried it out. It fixes the annoying issue I had before, however when I make the window smaller, it moves the whole paragraphs over. They actually move underneath the left paragraph. Is there a way I can just stick those paragraphs there, so no matter how wide or small I make the window, none of it moves? Like a static image?
 
I think what you are after is a fixed-width layout. Fixed, Fluid and Elastic Layouts « A Journey on the Web…

To achieve this you need a div with an ID of wrapper with a specified width and auto margins to centre it in the browser. Your content goes in there. There are loads of tutorials about this on the web so I won't go into it here.

Really your next step in getting good with code is to understand page flow and how one div affects those around it and, ultimately, how they go together to make a page layout.
 
You must log in or register to reply here.
Back
Top