/    Sign up×
Community /Pin to ProfileBookmark

Layout-DIV-question

Copy linkTweet thisAlerts:
Aug 12.2009

Hi there.

I’m new to the DIV-layouting and I’m trying to setup a layout with DIV, but I’m running into some difficulties.

This is what I have now: [URL=”http://www.lmm-test.com/test2.html”]http://www.lmm-test.com/test2.html[/URL]

As you can see, the 2 green divs left and right are over the dark blue bar. What I want is that the dark blue bar should be always on the bottom of the 2 green DIVs, no matter how long the 2 green DIVs are.

And the pink DIV “Always on left bottom” should always be on top op the dark blue bar but always be below the left green DIV.

Can anyone give me a hint what I’m doing wrong here.

Hope you can help me,

Leon

This is the code I use now:

[CODE]<!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”>
<!–
.container {
position: relative;
background-color:#FFFF00;
width:960px;
}

.sfeerbeeld {
margin: 0px;
padding: 0px;
top: 0px;
left: 0px;
background-color:#663300;
width: 960px;
height: 225px;
}

.links {
position: absolute;
left: 5px;
padding: 0px;
top: 225px;
width: 150px;
background-color:#66FF66;
}

.linksblok {
position: absolute;
left: 5px;
padding: 0px;
bottom: 50px;
width: 155px;
height: 20px;
background-color:#FF0066;
}

.midden {
margin-left: 160px;
padding: 0px;
margin-right: 160px;
top: 225px;
background-color:#99CCFF;
}

.rechts {
position: absolute;
right: 5px;
padding: 0px;
top: 225px;
width: 150px;
background-color:#CCFFCC;
}

.blok {
position: absolute;
right: 65px;
padding: 0px;
top: 135px;
width: 150px;
background-color:#ff0000;
height:150px;
z-index:100;
}

.balk {
margin: 0px;
padding: 0px;
top: 0px;
left: 0px;
background-color:#000066;
width: 960px;
height: 50px;
}

–>
</style>
</head>

<body>
<div align=”center”>
<div class=”container”>
<div align=”left”>
<div class=”sfeerbeeld”>
Big picture
</div>
<div style=”height:100%; background-color:#CCCCCC;”>
<div class=”links”>
Left side / menu<br />Left side / menu<br />Left side / menu<br />Left side / menu<br />Left side / menu<br />Left side / menu<br />Left side / menu<br />Left side / menu<br />Left side / menu<br />Left side / menu<br />Left side / menu<br />Left side / menu<br />Left side / menu<br />
</div>
<div class=”linksblok”>
Always on left bottom
</div>
</div>
<div class=”midden”>
Middle / text<br />Middle / text<br />Middle / text<br />Middle / text<br />Middle / text<br />Middle / text<br />
</div>
<div class=”rechts”>
Right side / news<br />Right side / news<br />Right side / news<br />Right side / news<br />Right side / news<br />Right side / news<br />Right side / news<br />Right side / news<br />Right side / news<br />Right side / news<br />Right side / news<br />
</div>
<div class=”blok”>
Small picture
</div>
<div class=”balk”>
Logos
</div>
</div>
</div>
</div>
</body>
</html>[/CODE]

to post a comment
CSS

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@TheBearMayAug 12.2009 — I think this is close to what you're describing:

[code=html]
<!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">
<!--
.container {
background-color:#FFFF00;
width:960px;
margin:0px auto;
}

.sfeerbeeld {
margin: 0px;
padding: 0px;
top: 0px;
left: 0px;
background-color:#663300;
width: 960px;
height: 225px;
}

.links {
float:left;
margin-left: 5px;
padding: 0px;
width: 150px;
background-color:#66FF66;
}

.linksblok {
float:left;
clear: left;
padding: 0px;
bottom: 50px;
width: 155px;
height: 20px;
background-color:#FF0066;
}

.midden {
margin-left:5px;
float: left;
padding-left:0px;
width: 640px;
background-color:#99CCFF;
}

.rechts {
float:right;
margin-right: 5px;
padding: 0px;
width: 150px;
background-color:#CCFFCC;
}

.blok {
position: absolute;
right: 65px;
padding: 0px;
top: 135px;
width: 150px;
background-color:#ff0000;
height:150px;
z-index:100;
}

.balk {
clear:both;
margin: 0px;
padding: 0px;
background-color:#000066;
width: 960px;
height: 50px;
}


-->
</style>
</head>

<body>
<div style="text-align:center">
<div class="container" style="text-align:left">

<div class="sfeerbeeld">
Big picture
</div>

<div style="height:100&#37;; background-color:#CCCCCC;">
<div class="links">
Left side / menu<br />Left side / menu<br />Left side / menu<br />Left side / menu<br />Left side / menu<br />Left side / menu<br />Left side / menu<br />Left side / menu<br />Left side / menu<br />Left side / menu<br />Left side / menu<br />Left side / menu<br />Left side / menu<br />

<div class="linksblok">
Always on left bottom
</div>
</div>



<div class="rechts">
Right side / news<br />Right side / news<br />Right side / news<br />Right side / news<br />Right side / news<br />Right side / news<br />Right side / news<br />Right side / news<br />Right side / news<br />Right side / news<br />Right side / news<br />
</div>


<div class="midden">
Middle / text<br />Middle / text<br />Middle / text<br />Middle / text<br />Middle / text<br />Middle / text<br />

</div>
</div>


<div class="blok">
Small picture
</div>

<div class="balk">
Logos
</div>
</div>

</div>
</body>
</html>[/code]
Copy linkTweet thisAlerts:
@LinkMasterauthorAug 12.2009 — Hi BearMay.

This is indeed almost what I'm looking for. Float and Clear are the ones I needed so I see. I will do some tutorials about these 2.

But one thing goes wrong here, the red 'small picture'-box aligns right of the browser with 65 px. It should be aligning right from the right side of the website. In my original code that was okay. Any idea how I can solve this?
Copy linkTweet thisAlerts:
@TheBearMayAug 12.2009 — Not sure that there is a good CSS way of doing that, but here's something that will work:
[code=html]<!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">
<!--
.container {
background-color:#FFFF00;
width:960px;
margin:0px auto;
}

.sfeerbeeld {
margin: 0px;
padding: 0px;
top: 0px;
left: 0px;
background-color:#663300;
width: 960px;
height: 225px;
}

.links {
float:left;
margin-left: 5px;
padding: 0px;
width: 150px;
background-color:#66FF66;
}

.linksblok {
float:left;
clear: left;
padding: 0px;
bottom: 50px;
width: 155px;
height: 20px;
background-color:#FF0066;
}

.midden {
margin-left:5px;
float: left;
padding-left:0px;
width: 640px;
background-color:#99CCFF;
}

.rechts {
float:right;
margin-right: 5px;
padding: 0px;
width: 150px;
background-color:#CCFFCC;
}

.blok {
position:absolute;
right: 65px;
padding: 0;
top: 135px;
width: 150px;
background-color:#ff0000;
height:150px;
}

.balk {
clear:both;
margin: 0px;
padding: 0px;
background-color:#000066;
width: 960px;
height: 50px;
}


-->
</style>
<script type="text/javascript">
//<![CDATA[

window.onload = function () {
if( parseInt(document.documentElement.clientWidth) > 960 ){
divArray = document.getElementsByTagName("div");
for (i=0;i<divArray.length;i++) {
if (divArray[i].className == "blok") {
divArray[i].style.right=((parseInt(document.documentElement.clientWidth) - 960)/2+65)+"px";
}
}
}
}

//]]>
</script>
</head>

<body>
<div style="text-align:center" >
<div class="container" style="text-align:left">

<div class="sfeerbeeld">
Big picture

</div>

<div style="height:100&#37;; background-color:#CCCCCC;">
<div class="links">
Left side / menu<br />Left side / menu<br />Left side / menu<br />Left side / menu<br />Left side / menu<br />Left side / menu<br />Left side / menu<br />Left side / menu<br />Left side / menu<br />Left side / menu<br />Left side / menu<br />Left side / menu<br />Left side / menu<br />

<div class="linksblok">
Always on left bottom
</div>
</div>



<div class="rechts">
Right side / news<br />Right side / news<br />Right side / news<br />Right side / news<br />Right side / news<br />Right side / news<br />Right side / news<br />Right side / news<br />Right side / news<br />Right side / news<br />Right side / news<br />
</div>


<div class="midden">
Middle / text<br />Middle / text<br />Middle / text<br />Middle / text<br />Middle / text<br />Middle / text<br />

</div>
</div>

<div class="blok">
Small picture
</div>


<div class="balk">
Logos
</div>
</div>

</div>
</body>
</html>[/code]
Copy linkTweet thisAlerts:
@TheBearMayAug 12.2009 — Playing around a little yields:
[code=html]
<!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">
<!--
.container {
background-color:#FFFF00;
width:960px;
margin:0px auto;
}

.sfeerbeeld {
margin: 0px;
padding: 0px;
top: 0px;
left: 0px;
background-color:#663300;
width: 960px;
height: 225px;
}

.links {
float:left;
margin-left: 5px;
padding: 0px;
width: 150px;
background-color:#66FF66;
}

.linksblok {
float:left;
clear: left;
padding: 0px;
bottom: 50px;
width: 155px;
height: 20px;
background-color:#FF0066;
}

.midden {
margin-left:5px;
float: left;
padding-left:0px;
width: 640px;
background-color:#99CCFF;
}

.rechts {
float:right;
margin-right: 5px;
padding: 0px;
width: 150px;
background-color:#CCFFCC;
}

.blok {
position:relative;
left: 745px;
padding: 0;
top: 135px;
width: 150px;
background-color:#ff0000;
height:150px;
}

.balk {
clear:both;
margin: 0px;
padding: 0px;
background-color:#000066;
width: 960px;
height: 50px;
}


-->
</style>

</head>

<body>
<div style="text-align:center" >
<div class="container" style="text-align:left">

<div class="sfeerbeeld">
Big picture
<div class="blok">
Small picture
</div>
</div>

<div style="height:100&#37;; background-color:#CCCCCC;">
<div class="links">
Left side / menu<br />Left side / menu<br />Left side / menu<br />Left side / menu<br />Left side / menu<br />Left side / menu<br />Left side / menu<br />Left side / menu<br />Left side / menu<br />Left side / menu<br />Left side / menu<br />Left side / menu<br />Left side / menu<br />

<div class="linksblok">
Always on left bottom
</div>
</div>



<div class="rechts">
Right side / news<br />Right side / news<br />Right side / news<br />Right side / news<br />Right side / news<br />Right side / news<br />Right side / news<br />Right side / news<br />Right side / news<br />Right side / news<br />Right side / news<br />
</div>


<div class="midden">
Middle / text<br />Middle / text<br />Middle / text<br />Middle / text<br />Middle / text<br />Middle / text<br />

</div>
</div>




<div class="balk">
Logos
</div>
</div>

</div>
</body>
</html>[/code]
Copy linkTweet thisAlerts:
@LinkMasterauthorAug 12.2009 — AWESOME!

Many thnx, appreciate the help...

Leon
×

Success!

Help @LinkMaster spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.20,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...