Bit of help please?

stevengreen22 · April 17, 2011

I'm doing somethign wrong but can't see it or rectify it no matter how many times I've tried shuffling things around.

The main area is the issue. the light blue column has some text in, when i sit anything next to it the text drops below the box, have tried a variety of options but none successful. I'm just creating the layout and could just remove the text, I'm worried that when it comes to placing images and so on inside it will get worse.

elp please.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<style type="text/css">

#wholepage {
width: 100%;
margin-right: auto;
margin-left: auto;
height: 1000px;
background:green;
}
#header {
width: 98%;
height:180px;
margin-left:1%;
background:red;
}
#navcol {
margin-top:10px;
width: 150px;
height:640px;
margin-left:1%;
background:cyan;
}
#content {
width: 98%;
height:650px;
margin-left: 1%;
margin-top:10px;
background:orange;
}
#footer{
width: 98%;
height:80px;
margin-left:1%;
background:red;
}
#footernav{
width: 96%;
height:40px;
margin-left:2%;
background:yellow;
}
#footercopy{
width: 96%;
height:30px;
margin-left:2%;
background:orange;
}
#footerwc3{
width: 6%;
height:30px;
margin-left:47%;
background:blue;
}
#topbarleft{
width: 45%;
height:50px;
float:left;
margin-left:5%;
background:blue;
}
#topbarright{
width: 45%;
height:50px;
float:left;
background:lightblue;
}
#logoimage {
height: 100px;
width: 100px;
float: left;
margin-left: 5%;
margin-top: 10px;
    background:yellow;
}
#logoimage2 {
height: 100px;
width: 80%;
float: left;
margin-left: 2%;
margin-top: 10px;
    background:yellow;
}
#adheader {
height:80px;
width:100px;
margin-right:20px;
margin-top:10px;
float:right;
background:blue;
}
#mainnav {
height: 50px;
width:100%;
margin-top:5px;
background:pink;
}	
.clearb {
clear:both;
}
.clearl {
clear:left;
}
.clearr {
clear:right;
}
body {
margin: 0px;
}
.rightad {
width:160px; 
height:600px; 
background: blue; 
padding:6px;
float:right;
margin-right:1%;
margin-top:10px;
}	
#centercontent {
width: 72%;
    background:pink;
    float:left; 
margin-left:13%;
margin-top:10px;
height: 630px;
}

</style>

<body>

<div id="wholepage">
	<div id="header"> 
		<div id="topbarleft">MAIN HOME LINKS ETC</div>
		<div id="topbarright">LOGIN LINKS ETC</div>

		<div id="logoimage">Logo </div>
			<div id="logoimage2">and other stuff can go here, 
		image etc, this can / may be removed amended depending 
		on whether a side nav is used, size is also to be determined<
				<div id="adheader">AD SPACE???</div>
			</div>
	</div> <!--End of header-->
		<div id="mainnav">Main Navigation bar</div><!--End of main nav-->


	<div id="content" > 
		<div class="rightad">Ad Space</div><div id="centercontent">dfsgsdg</div>

		<div id="navcol" >navcol</div>




	</div> <!--End of content-->	


	<div id="footer">
		<div id="footernav"><h4>Footer Navigation</h4></div>
		<div id="footercopy" style="clearb">
			<div id="footerwc3">WC3</div>
		</div><!--End Footercopy (bottom part of footer)-->
	</div><!--End of footer-->







</div><!--End of main page-->


</body>
</html>

thanks

stevengreen22 · April 17, 2011

...the same thing happens when I type in the 'footercopy' div.

otuatail · April 18, 2011

You could put a few divs in this area and the information would sit where you wanted it.

Desmond.

stevengreen22 · April 18, 2011

But i have mate, the divs are set up within each other. it all displays fine until i input text, then it's almost like that takes precedence and pushes everything else out of align.

it has to be something daft that im missing.

cssfreakie · April 18, 2011

But i have mate, the divs are set up within each other. it all displays fine until i input text, then it's almost like that takes precedence and pushes everything else out of align.

it has to be something daft that im missing.

do the elements fit in the container width-wise? If that has a fixed width anything that doesn't fit in it will be pushed to the next line

stevengreen22 · April 18, 2011

I've made them all %.

Just changed it a bit to include the right ad within the main content area, not what I wanted but it's a resolution.

cssfreakie · April 18, 2011

well, if it's fixed, mark it solved. another thing could be if they should all fit on one line is that your missing a float (in case it's about block elements)

stevengreen22 · April 18, 2011

they are all blocks, i was doing what you suggested and creating a basic layout / structure to the site for where things will go.

will now change so the width is fixed. (musg to play with now ) math who?

stevengreen22 · April 18, 2011

scratch that - 960 is small!!! maybe is my resolution but thats tiny.....

cssfreakie · April 18, 2011

try this to set you up

#wrapper, #header, #middle, #footer{
    width:960px;
}
#wrapper, #middle {
  overflow:hidden;
  margin:0 auto;
}
#header, #footer{
  height: 120px;
  clear:both;
}
#left,#right{
  float:left;
  min-height:300px;
}
#left{ /* goes inside your middle div */
  width: 360px;
}
#right{
  width: 600px;
}

I just typed that, didn't check it, but it should be okay to give a headstart

cssfreakie · April 18, 2011

scratch that - 960 is small!!! maybe is my resolution but thats tiny.....

don't forget that when you make something it's not you that is important, but your audience.

But do as you like, make it 2000px if you find it better

stevengreen22 · April 18, 2011

theres so many variables that go into this isn't there. it's borderline frustrating but you can't please everyone I guess.

My targetr audience will become post grad / uni students / youing professionals. I think that perhaps the majority of them will be 'on the ball' so to speak with good monitors and high resolutions, for that reason I want to use a fluid layout but then...what if they view the site from a pc at work...??!?! DANGER!!! they see what I see...and it's not pretty

thanks for typing that bit of code. it's good to have something to compare against.

also.....

#wrapper, #header, #middle, #footer{

width:960px;

is going to save me a lot of time

cssfreakie · April 18, 2011

yes css is all about efficiency. why declare something a million times when you can do by doing it ones.

Maybe try out instead of 960px something like 80% if you like such a design more.

Don't forget to give min-width's on elements otherwise on resize stuff get squeezed.

stevengreen22 · April 18, 2011

literally got a message saying a new post was created as I was replying.

I put a min width on and huge improvement! Might be an oversight but for the time being I will put it on the 'body' - i'm thinking that that way no matter what the resolution the page as a whole should be displayed ok....

cssfreakie · April 18, 2011

literally got a message saying a new post was created as I was replying.

I put a min width on and huge improvement! Might be an oversight but for the time being I will put it on the 'body' - i'm thinking that that way no matter what the resolution the page as a whole should be displayed ok....

on the body?? did you try it out and see what happens? indeed nothing. assign your elements with it. And if your smart only 1 needs to be assigned.

stevengreen22 · April 18, 2011

on the body....it works?!

body {
margin: 0px;
min-width:960px;
}

the rest is above...? maybe I screwed something up and got lucky? otherwise...i would add it to my 'wholepage' which would govern everything..i think that would work - not tested.

Sign In

Bit of help please?

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information