div issues...

alykins

04-26-2011, 03:54 AM

Hi, before reading further, remember none of us were born knowing how to code- so please no condescending bs...
anyways- I am new to coding... in the past week i have drilled my head through xhtml and css w/ more intensity than i ever exp in college... UNFORTUNATELY- I am sort of "self teaching"... I have made serious headway and at the end of last week I encountered a snag that I cannot come to terms with. The code I will post is VERY basic... but it does not load correctly... I feel I am missing something bc I have no "formal" teacher... so any help would be great...
What I am trying to do...
Basically just understand these flippin div elements more... What I want (to avoid table base layouts) is to float three div elements (I havent made it past the first two :( )

what my aim is ... I need the "header" div to contain the div elements "headtext" and "headimg"...
then floating to the left of the page the div "leftspace"

the problems...

1 my header div does not stretch around the two divs "headtext" and "headimg" ...

2 the img i have (you wont be able to see) just kinda hangs out to the upper right... it is not contained within its element... Ive tried using <hr> both within the elements headtext/headimg and also in the div header... this does not work either (i took them out, but left code there in case i am writing it wrong)

3) neither of my two divs (headtext or headimg) are within the div header (and they are supposed to be

4 my div leftspace keeps getting thrown into the div element "headimg" ....

i have spent hours looking through forum posts, web resources and the limited printed ref that i have and i see no reason it wont work properly... what am i missing?! :eek:

This is one of my final hurdles b4 i start to learn jscript and it is driving me nuts... its so basic but i cannot figure it out...

also- to the would be "go and validate" i know there are errors with height/width being defined in my body/table elements, but when i removed them i still had same issue.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="EN" dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title>title title title title title title title title title </title>

<link rel= "stylesheet"
type= "text/css"
href= "title.css" />
<style type= "text/css">
.header{
border: 3px darkblue solid;
position: relative;
float: top;
clear: both;
width: 100%;
height: 5%;
}

div.item hr{
display: block;
clear: both;
visibility: hidden;
}

.left{
position: relative;
float: left;
clear: left;
width: 5%;
height: 90%;
background-color: black;
}

</style>

</head>
<body height= 720px width= 1024px>


<div class= "header">
<div id= "headtext">
Text in the header section!
</div>
<div id= "headimg">
<img src= "./logo.jpg"
alt= "logo">
<div>
</div>



<div id= "left_space" class= "left">
<table height= 100% width= 100% border=1>
<tr height= 60% width= 100% bgcolor= "green">
<td>Text Top </td>
</tr>
<tr height= 40% width= 100% bgcolor= "darkgreen">
<td> Text Bottom </td>
</tr>
</table>
</div>



ps- how do you post code inside those nifty scroll boxes?

bullant

04-26-2011, 04:16 AM

Maybe use this demo "skeleton" header, 2 columns and footer layout as a guide.

I've added a headerImg and a headerText div to the header div. They are floated left and right. The "2 columns" are a side bar and main content div.

I'm not sure what your "leftspace" is for. If you want some blank space on your page you can set margins and/or padding to elements to create space around them or their content.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title></title>
<style type="text/css">
#wrapper {
width: 900px;
margin: 0px auto 0px auto;
border: 1px solid red;
height: auto;
}
#header {
border: 1px solid blue;
overflow: hidden;
}
#header #headerImg {
width: 200px;
float: left;
border: 1px solid orange;
}
#header #headerText {
width: 690px;
float: right;
border: 1px solid orange;
}
#content {
width: 70%;
float: left;
}
#content .gutter {
margin: 0px 0px 0px 0px;
padding: 20px 20px 20px 20px;
}
#sidebar {
width: 30%;
float: right;
}
#sidebar .gutter {
margin: 0px 0px 0px 0px;
padding: 20px 20px 20px 20px;
border: 1px solid green;
}
#footer {
clear: both;
border: 1px solid black;
}
</style>
<script type="text/javascript"></script>
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="headerImg">HEADER IMG</div>
<div id="headerText">HEADER TEXT</div>
</div>
<div id="content">
<div class="gutter"> 
<h1>LEFT MAIN CONTENT COLUMN</h1>
</div>
</div>
<div id="sidebar">
<div class="gutter"> 
<h1>RIGHT SIDE BAR COLUMN</h1>
</div>
</div>
<div id="footer">
<h1>FOOTER BAR</h1>
</div>
</div>
</body>
</html>
ps- how do you post code inside those nifty scroll boxes?highlight your code as if you were going to copy it and then click the # icon in the editors toolbar

Wojjie

04-26-2011, 04:26 AM

You want to use [code] tags to enclose it, with a corresponding close tag after.

First of all, there is no float:top, so that actually will do nothing.

Also, I believe there might be some css in title.css that might help figure out the problem, but I suspect it has to do with floats.

First, if you are using float:left on an element and want a div element on the right, you can either float the element on the right, or set the width of the element to be the remainder of space left over from the left element, then it will automatically place itself on the right.

If the right element is longer than the left element always, then you don't have to worry so much about 'random' behavior, like more content falling to the right of the left element you don't want to. If you do get that problem, you can use 'clear'. For instance, if you put 'clear:left' on another element, it will place that element either at the end of a 'float:left' element or the next 'line', which ever comes later.

If you make a div, and put two divs in it that both float, the containing div will not encompass the two inner divs, and the way to get around that is to have one of the divs not float, but be the remaining width, or if that is not possible, add a dummy div that has 'clear:both' on it. Some designers will setup a CSS class that only has 'clear:both' and will use it when necessary.

Hope that helps, and if you post the contents of that css file, I will more likely be able to spot the error.

bullant

04-26-2011, 04:30 AM

If you make a div, and put two divs in it that both float, the containing div will not encompass the two inner divs, and the way to get around that is to have one of the divs not float, but be the remaining width, or if that is not possible, add a dummy div that has 'clear:both' on it.

An easier way imo is to just set overflow: hidden on the containing div - see #header css styles in my demo.
The border on the header div then encloses its 2 child floated divs.

alykins

04-26-2011, 04:30 AM

why do you call out #header #headerImg{ and #header #headerText{...
also... the "leftspace" you could think of as a "left element"... or a "left column" ... i didn't know what to call it so i called it leftspace

alykins

04-26-2011, 04:33 AM

Hope that helps, and if you post the contents of that css file, I will more likely be able to spot the error.

oops.... forgot the css....

#headimg {
height: 100%;
width: 25%;
float: right;
clear: right;
background-color: gray;
}

#headtext {
height: 100%;
width: 75%;
float: left;
clear: left;
background-color: green;
}

bullant

04-26-2011, 04:42 AM

why do you call out #header #headerImg{ and #header #headerText{...

ok, that is just a personal preference to remind me that headerImg and headerText are child elements of header.

Since the child divs have their own id, you could use just

#headerImg {
width: 200px;
float: left;
border: 1px solid orange;
}
#headerText {
width: 690px;
float: right;
border: 1px solid orange;
}But bear in mind, say for some reason you had 2 divs inside an element, say #header, and the 2 divs did not have an id and you want to assign a background colour of green to those 2 divs without affecting the other divs on the web page you would have to do something like

#header div {
background-color: 'green';
}

alykins

04-26-2011, 04:50 AM

for the leftspace issue- it will have a table in it; think of it as leftcolumn... im not really having an issue with this except it keeps popping up inside my div element headimg.... as for the #header #headXXX items... doesnt this affect css attributes? or... better question... how would you render these elements in a css file... #header #headerXXX? or will css realize that #headerXXX is an element even though it has #header in front of it?

Does it matter that i am working with % instead of px?

Wojjie

04-26-2011, 05:57 AM

An easier way imo is to just set overflow: hidden on the containing div - see #header css styles in my demo.
The border on the header div then encloses its 2 child floated divs.

Seems sort of a 'hack' as overflow:hidden is not meant for that purpose, and it doesn't work on IE8.

Wojjie

04-26-2011, 06:06 AM

Your problem relies on the fact that the browser is not considering the height of your two floating elements.

What I would do is:

HTML snippet:

<div class= "header">
<div id= "headimg"><img src= "./logo.jpg" alt= "logo"><div>
<div id= "headtext">Text in the header section!</div>
</div>

CSS:

#headimg {
width: 25%;
float: right;
background-color: gray;
}

#headtext {
width: 74%;
background-color: green;
}

I usually like to add a few pixels room incase since different browsers might calculate width differently depending on what other CSS rules you have. This is also assuming that #headtext is going to be taller tahn #headimg

Also, you might want to consider putting clear:both in the left space.

bullant

04-26-2011, 06:15 AM

it doesn't work on IE8.

It's not a hack and works perfectly in my IE7,8,9, FF4, Oprah11, Safari for Windows and Chrome.

Wojjie

04-26-2011, 06:35 AM

It's not a hack and works perfectly in my IE7,8,9, FF4, Oprah11, Safari for Windows and Chrome.

Oops, sorry, I was testing it without a doctype.

But it is still a work around/hack as it is not really intended for this purpose, and only works due to the side effect of overflow: hidden;. Though it is a neat work around, and I may use it in the future, but there are a few draw backs to it, like being at the mercy of the parent container (if its the parent container, you can end up with content being hidden when resizing the window), and being careful not to later set a width and/or height of that div.

bullant

04-26-2011, 06:45 AM

I've always used overflow: hidden because it fits my purposes when I use it, but if making content potentially invisible is an issue, one can always use overflow: auto instead to extend the parent container's border around the floated child elements and they will get scroll bars automatically on the parent container if needed.

Wojjie

04-26-2011, 07:25 AM

Both can be essentially undesirable, but it isn't too difficult to make sure that that doesn't happen.

Either way, the trick will be filed in my head, as I love minimizing HTML markup, I optimize every byte I can away, since they can add up fast, and can amount to a huge savings in bandwidth and a noticeable difference in page load.

bullant

04-26-2011, 07:29 AM

no problem :)

Don't get me wrong. I'm not trying to get you to change the way you normally do things. I just posted the way I do it as an alternative since I don't have any issues with it and people can choose whatever method works best for them :)

Wojjie

04-26-2011, 08:23 AM

Oh, don't worry, I am not that easily persuaded to change my ways ;)

I will just consider using it in the future in place of a <div class="clr"></div> type of thing, as it would save me 23bytes, which gzipped its less, but still > 0.

bullant

04-26-2011, 08:26 AM

no problem :) and if some time in the future the method I have been using causes me problems I'll use your suggestion :)