Web Design Forums

mpdennis · 18-09-2007, 09:49

Hi,

Just throwing together a html quick and dirty mockup with inline styles.

I have 3 divs welpic, weltxt and subscribe.

These are nested inside another div.

I am trying to get the weltxt and welpic to float left and subscribe to float right.

My eyes are bleeding and I don't know what I have missed.

I've done this 100 times before and I think the red mist is preventing me sorting this out.

Any help appreciated.

Thanks

Here is the code

Quote:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=ISO-8859-1" />
<title>Untitled Document</title>

<style type="text/css">
body {
background-color:#CCCCCC;
font-family:Arial, Helvetica, sans-serif;
color:#FFFFFF;
}

.lcstyle h2 {
font-family:Georgia, "Times New Roman", Times, serif;
color:#CCCCCC;
}

.lcstyle ul li {
list-style-type:none;
}

.lcstyle a {
color:#CCCCCC;
outline:none;
}

.lcstyle a:hover {
color:#FFFFFF;
outline:none;
}

#page {
background-color:#999999;
width: 780px;
height:700px;
margin-left:auto;
margin-right:auto;
}

.lcstyle {
font-size:small;
background-color:#333333;
width:200px;
margin:10px;
padding:20px;
float:left;
border:thin;
border-color:#FFFFFF;
}

#partners {
height:98px;
}

#welpic {
font-size:small;
background-color:#333333;
width:460px;
margin:10px;
padding:20px;
float: left;
}

#weltxt {
font-size:small;
background-color:#333333;
width:460px;
margin:10px;
padding:20px;
float: left;
}

#subscribe {
font-size:small;
background-color:#333333;
width:200px;
margin:10px;
padding:20px;
float: right;
}

#low_content {
margin: 0 auto;
/*Now we get rid of the previous IE hack*/
text-align:left;
}

</style>

</head>

<body>

<div id="page">
<div id="mid_content">
<div id="welpic">welpic placeholder</div>
<div id="weltxt">
<h2>Welcome to Website.</h2>
Here you can find out all bout what's happening in the project. Here
you can find out all bout what's happening
in Hatfield's regeneration project
</div>

<div id="subscribe">
<p>Subscribe to our Newsletter</p>
<form id="form1" name="form1" method="post"
action=""> <label>Name <input name="textfield"
type="text" /> </label>
<p> <label>Email address <input name="textfield2"
type="text" /> </label> </p>
<p> <label> <input name="Submit"
value="Submit" type="submit" /> </label> </p>
</form>
</div>
</div>

<div id="low_content">
<div id="downloads" class="lcstyle">
<h2>Downloads</h2>
<ul>
<li><a href="#">Download Image </a></li>
<li><a href="#">File for Download </a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
</ul>
</div>
<div id="news" class="lcstyle">
<h2>News</h2>
<ul>
<li><a href="#">10.10.07 - Something</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
</ul>
</div>
<div id="partners" class="lcstyle">
<h4>Partners Logos</h4>
<p>Image placeholder </p>
</div>
</div>
</div>
</body>
</html>

Anxious · 18-09-2007, 09:58

I think your welpic and weltxt divs are too wide for the containing div.

mpdennis · 18-09-2007, 10:10

Quote:

Originally Posted by Anxious

I think your welpic and weltxt divs are too wide for the containing div.

Nope. Tried anyway and didn't work. Besides, It's floating up to the right of weltxt but not welpic.

Maybe the divs are placed wrong,

arrgghhh, I don't know.

Thanks for suggestion though

Coops · 18-09-2007, 10:11

That hurts my tiny mind.

Scott S · 18-09-2007, 10:32

Have u tried using the position element? for the ones on the left, just enter
left: 5px (or whatever u want)
top: 5px (as above)
and flip it for the one on the right...
right: 600px (again, change to whatever)
Is a rather crude method, but it might work.

Then again, it might not lol. My brain aint exactly with it at the moment.

mpdennis · 18-09-2007, 11:19

Thanks Scott. I was thinking of that as a last resort. Hopefully not quite there yet but thanks for your input even so.

pgo · 18-09-2007, 11:57

You could indent your code so we can tell what's the child of what.

So you want it to show up - | welpic | weltxt | subscribe | - right?

Since that's also the source order, just float them all left. Then you have to deal with your width math:

#welpic: 460px + 10px (left margin) + 10px (right margin) + 20px (left padding) + 20px (right padding) = 520px

#weltxt: 460px + 10px (left margin) + 10px (right margin) + 20px (left padding) + 20px (right padding) = 520px

#subscribe: 200px + 10px (left margin) + 10px (right margin) + 20px (left padding) + 20px (right padding) = 260px

Total: 520px + 520px + 260px = 1300px

#page (and therefore #mid_content) = 780px width.

1300px > 780px.

Even if you removed all margins and padding and #subscribe, #welpic and #weltxt would STILL amount to 920px, which is also greater than 780px.

mpdennis · 18-09-2007, 12:13

pgo, I'm trying to place welpic over wel txt and float subscribe to the right. It also seems to view OK in IE7 ? but not firefox, funny thing is, my dev browser is firefox lol Maybe I try again tomoz.

mpdennis · 19-09-2007, 06:38

Got this sorted. I don't need the welpic div to achieve the look I want.

The image should be included as content.

Thanks to all of you who added input

M

pgo · 20-09-2007, 10:03

Quote:

Originally Posted by mpdennis

pgo, I'm trying to place welpic over wel txt and float subscribe to the right. It also seems to view OK in IE7 ? but not firefox, funny thing is, my dev browser is firefox lol Maybe I try again tomoz.

D'oh.

18-09-2007, 09:58	#2 (permalink)
Anxious the bee has grey hair Join Date: Jun 2007 Location: Glasgow Posts: 3,583	I think your welpic and weltxt divs are too wide for the containing div. __________________ blog \| twitter

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search

18-09-2007, 10:11	#4 (permalink)
Coops Pops. Join Date: Aug 2007 Posts: 4,626	That hurts my tiny mind.

18-09-2007, 10:32	#5 (permalink)
Scott S I speaks reel Englis! Join Date: Sep 2007 Location: Earth. I Think....? Posts: 2	Have u tried using the position element? for the ones on the left, just enter left: 5px (or whatever u want) top: 5px (as above) and flip it for the one on the right... right: 600px (again, change to whatever) Is a rather crude method, but it might work. Then again, it might not lol. My brain aint exactly with it at the moment.

18-09-2007, 11:19	#6 (permalink)
mpdennis Registered User Join Date: Aug 2007 Location: West Midlands, UK Posts: 80	Thanks Scott. I was thinking of that as a last resort. Hopefully not quite there yet but thanks for your input even so.

18-09-2007, 11:57	#7 (permalink)
pgo Senior Member Join Date: Jan 2005 Posts: 12,339	You could indent your code so we can tell what's the child of what. So you want it to show up - \| welpic \| weltxt \| subscribe \| - right? Since that's also the source order, just float them all left. Then you have to deal with your width math: #welpic: 460px + 10px (left margin) + 10px (right margin) + 20px (left padding) + 20px (right padding) = 520px #weltxt: 460px + 10px (left margin) + 10px (right margin) + 20px (left padding) + 20px (right padding) = 520px #subscribe: 200px + 10px (left margin) + 10px (right margin) + 20px (left padding) + 20px (right padding) = 260px Total: 520px + 520px + 260px = 1300px #page (and therefore #mid_content) = 780px width. 1300px > 780px. Even if you removed all margins and padding and #subscribe, #welpic and #weltxt would STILL amount to 920px, which is also greater than 780px.

18-09-2007, 12:13	#8 (permalink)
mpdennis Registered User Join Date: Aug 2007 Location: West Midlands, UK Posts: 80	pgo, I'm trying to place welpic over wel txt and float subscribe to the right. It also seems to view OK in IE7 ? but not firefox, funny thing is, my dev browser is firefox lol Maybe I try again tomoz.

19-09-2007, 06:38	#9 (permalink)
mpdennis Registered User Join Date: Aug 2007 Location: West Midlands, UK Posts: 80	Got this sorted. I don't need the welpic div to achieve the look I want. The image should be included as content. Thanks to all of you who added input M

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)