Jump to content

Divs are not positioned where I want them

KDM

By KDM
in CSS Help

 Share

Recommended Posts

KDM Member

KDM

Posted
  • Author
Posted

The anomaly div id is rightcolumn. I can't get it to go where I want it.  Also, the poularcategories div doesn't appear to be within the div centercolumn when I look at my site in dreamweaver.

 

The Html code. 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<link href="assets/freakstyles.css" rel="stylesheet" type="text/css" />

</head>

<body>

<div id="wrapper">
  <div id="logo"><img src="../assets/images/Logo.jpg" width="280" height="154" />
  </div>
  <div id="topad">
<iframe border=0 frameborder=0 marginheight=0 marginwidth=0 width=736 height=98 scrolling=no allowtransparency=true src=http://adserver.juicyads.com/adshow.php?adzone=52580></iframe>

  </div>

  <div id="navigation">
  
  <form id="form1" name="form1" method="post" action="">
  upload images | contact | terms of use | search:
    <label>
      <input type="text" name="search" id="search" />
      Search
      <input type="submit" name="search2" id="search2" value="Submit" />
    </label>
  </form>
  </div>


  
  
  <div id ="leftcolumn">
  </div>
  <div id="centercolumn">
    <div id="squaread">Content for  id "squaread" Goes Here</div>
    <div id="newestimages">Content for  id "newestimages" Goes Here</div>
    
    <div id="popularcategories">Content for  id "popularcategories" Goes Here</div>
  </div>
   
  

  	
  <div id="rightcolumn">
  </div>


</div>
</body>
</html>

 

CSS

#wrapper {
width: 1320px;
margin-right: auto;
margin-left: auto;
height: 1300px;
}
#centercolumn {
margin-right: auto;
margin-left: auto;
width: 930px;
}
#logo {
height: 154px;
width: 280px;
float: left;
background-color: #0F0;
}
#leftcolumn {
height: 727px;
width: 176px;
background-attachment: scroll;
background-image: url(../../assets/images/leftNavBG.jpg);
background-repeat: no-repeat;
background-position: center top;
float: left;
clear: left;
margin-top: 63px;
margin-right: 10px;
overflow: auto;
}
#rightcolumn {
height: 727px;
width: 176px;
background-attachment: scroll;
background-image: url(../../assets/images/rightColumn.jpg);
background-repeat: no-repeat;
background-position: center top;
float: left;
margin-top: 63px;
margin-left: 10px;
}
#navigation {
width: 600px;
text-align: right;
height: 20px;
float: right;
}
#squaread {
background-attachment: scroll;
background-image: url(../../assets/images/watch.jpg);
background-repeat: no-repeat;
background-position: center top;
height: 357px;
width: 359px;
float: left;
clear: right;
margin-top: 63px;
}
#newestimages {
height: 474px;
width: 560px;
background-attachment: scroll;
background-repeat: no-repeat;
background-position: center top;
float: left;
margin-top: 63px;
margin-left: 10px;
background-image: url(images/newestImages.jpg);
}
#popularcategories {
background-image: url(../../assets/images/popularCatergories.jpg);
width: 925px;
background-attachment: scroll;
background-repeat: no-repeat;
background-position: center top;
background-color: #3C5A9A;
height: 323px;
margin-top: 10px;
float: left;
}
#footer {
background-color: #3C5A9A;
width: 1300px;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
text-align: center;
}
#topad {
width: 736px;
float: right;
}
#bottomad {
margin-top: 10px;
}
body {
margin-top: 0px;
background-attachment: scroll;
background-image: url(../../assets/images/bg.jpg);
background-position: center top;
background-repeat: repeat-x;
background-color: #FFF;
}

 

 

Link to comment
Share on other sites
cssfreakie Regular Member

cssfreakie

Posted
Posted

Before I start of just some things to pay attention to:

 

+ your images, are missing an alt tag

+ don't give images dimensions in html.

+ and above all before you start adding content, make your framework, not the other way around. Set background colors on everything so you can see where all elements are. (remove afterwards of course)

Do with this info what you want you can ignore it, but it will save you quite some time.

+ apply some logic to the way you build up a page, group the header elements, group the center elements group the footer elements.

 

 

anyway i gave all your elements a background color and stripped it down to a framework but keeping the dimensions, and noticed pretty soon that your center div, does not use float. since it is a block element it pushes of the element (div right)

 

So I removed that weird margin left and right which are totally not necesarry and added a float to div center. and now it works as a charm. besides that it now looks like a modern art work :) instead of an advertisements for big booties  ;D

I also added a header div around all those header crap. and added some comments in the css and brought some proper indentation in to it.

 

So here is the code it works, so next time you make a design,

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<link href="assets/freakstyles.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#wrapper {
width: 1320px;
margin-right: auto;
margin-left: auto;
height: 1300px;
        background:yellow;
}
#header{
    width: 1320px;
    overflow:hidden;
    background:#000;
}
#centercolumn {
width: 930px;
        background:greenyellow;
        overflow:hidden; /* you did not supply a height for it */
        float:left; 
}
#logo {
height: 154px;
width: 280px;
float: left;
        background:#f4a; /* pink */
}
#leftcolumn {
height: 727px;
width: 176px;
float: left;
clear: left;
margin-top: 63px;
margin-right: 10px;
overflow: auto;
        background:#00ccff;
}
#rightcolumn {
height: 727px;
width: 176px;
float: left;
margin-top: 63px;
margin-left: 10px;
        background:#333;
}
#navigation {
width: 600px;
text-align: right;
height: 20px;
float: right;
        background:#fff;
}
#squaread {
height: 357px;
width: 359px;
float: left;
clear: right;
margin-top: 63px;
        background:#999;
}
#newestimages {
height: 474px;
width: 560px;
float: left;
margin-top: 63px;
margin-left: 10px;
        background:#ff9f0e;
}
#popularcategories {
width: 925px;
height: 323px;
margin-top: 10px;
float: left;
        background:#fbc2c4;
}
#footer {
width: 1300px;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
text-align: center;
        background:#0000cc;
}
#topad {
width: 736px;
float: right;
        background:#008000;
}
#bottomad {
margin-top: 10px;
        background: #00FF00;
        /* missing dimensions */
}
body {
margin-top: 0px;
background: red;
}
</style>
</head>

<body>

<div id="wrapper">
  <div id="header">
      <div id="logo">logo</div>
      <div id="topad">top ad</div>
      <div id="navigation">
          <form id="form1" name="form1" method="post" action="">
             upload images | contact | terms of use | search:<input type="text" name="search" id="search" />
            Search<input type="submit" name="search2" id="search2" value="Submit" />
          </form>
      </div>
  </div>
  <div id ="leftcolumn"></div>
  <div id="centercolumn">
    <div id="squaread">Squared ad</div>
    <div id="newestimages">newest images</div>
    <div id="popularcategories">popular categories</div>
  </div>
  <div id="rightcolumn">
      rightcolumn
  </div>
</div>
</body>
</html>

Link to comment
Share on other sites
KDM Member

KDM

Posted
  • Author
Posted

Thanks a lot for taking the time to do this  :D.  I watched this tutorial and it looks like he does it the same way you do.

http://www.youtube.com/watch?v=VjPThcop0zk&NR=1

 

My layout looks a lot cleaner now.  I see what you mean with the header tag and using logic when laying out a page.

 

But just a couple of things. 

  • In Dreamweaver the wrapper div is not auto expanding, but the video I posted shows me how to do that. I added this 

<div style="clear:both";></div>


  •  
  • I can't seem to find the #wrapper in the css panel for some reason.
  • Can you explain your use of the overflow property, and how you know when to set it to hidden or auto etc?
  • I'm trying to understand the concept between float and clear. My understanding is that when you float something to the left and clear right, nothing will be positioned to the right of the element set to float left with a clear right set.  Is this correct? I asked this because I noticed you have squaread floated to the left with a clear right, but newest images is to the right of squareimages  please explain.
  • Oh yeah I thought I trashed that ad code, sorry dude. :D
  • The righcolumn div looks perfect in dreamweaver, but when I preview it, it's still being pushed down.

 

Thanks again, I'm just want to learn to do things the right way.

 

Link to comment
Share on other sites
cssfreakie Regular Member

cssfreakie

Posted
Posted
I can't seem to find the #wrapper in the css panel for some reason.

i don't use dreamweaver because it sucks for how i work, That said, i use netbeans.

so where you panel is i have no idea.

 

oveflow hidden i use that when i don't know the height of div, but i did set a width, by using overflow: hidden (little trick) it will shrinkwrap.

have a read here: i wrote something about it: http://cssfreakie.blogspot.com/2011/03/fixing-clearfix-by-using-overflowhidden.html

 

Now you question on clears and floats, in a nutshell (but you better read the w3.org manual on it):

float comes in 2 flavours, left or right, clear comes in 3 flavors left right and both. The best thing to do is just play it, becaus eif i tell you you will forget it the moment you read it. If you want try to solve the attached image with as little as possible markup and css. , happy to review that code, ones you did it right, you understand clears and floats. But first read the manual: http://www.w3.org/TR/CSS2/visuren.html#floats'

 

the only reason why that div is pushed down is either there is not enough space for it. or you removed float on the center div.

The code i provided works, so if dreamweaver facks up. try out netbeans or vim, they are free, so you don't loose anything.

 

[attachment deleted by admin]

Link to comment
Share on other sites
KDM Member

KDM

Posted
  • Author
Posted

Yea Dreamweaver is buggy. I just downloaded netbeams. I'll give this a try. I got that right column to the top. It was because #wrapper wasn't showing up in my css panel.  BUT IT WAS IN THE STYLESHEET WTH!? I'm done with dreamwweaver.  Thanks again.

Link to comment
Share on other sites
cssfreakie Regular Member

cssfreakie

Posted
Posted

you may also want to combine that with a local server like wamp, installation is under 5 min. on my blog i wrote a simple guide how to combine netbeans with wamp.

 

also, while you're googling, maybe order a new shift button, yours seem to be broken  ;D

Link to comment
Share on other sites
stevengreen22 Member

stevengreen22

Posted
Posted

freakie...Had a look at that question mark and thought I'd give it  a whirl while at work.

 

I had a crack, think it can still be improved though and maybe made shorter.  with 'right1', this coudl either be changed to 'left2' but with different margin settings I guess. Unless there's a better way.

 

This is code, can I make it better - btw...using notepad so be gentle.  As mush as you don't like dreamweaver, the code hints are ideal. (I missed it)

 

<!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: 1000px;
margin-right: auto;
margin-left: auto;
height: 1500px;
background:green;
}

.div_left1 {
height: 150px;
width: 150px;
float: left;
text-align: center;
margin-left: 200px;
margin-top: 10px;
    background:yellow;
}

.div_left {
height: 150px;
width: 150px;
float: left;
text-align: center;
margin-left: 150px;
margin-top:10px;
margin-left:10px;
    background:yellow;
}

.div_right1 {
height: 150px;
width: 150px;
float: right;
text-align: center;
margin-right: 330px;
margin-top:10px;
background:yellow;
}

.dot {
height: 150px;
width: 150px;
float: left;
text-align: center;
padding:10px;
margin-left: 190px;
margin-right: 10px;
margin-top: 10px;
margin-bottom: 10px;
    background:red;
}

.clear {
clear:both;
}
</style>

<body>

<div id="wholepage">
	<div class="div_left1">Left1</div>
	<div class="div_left">Left</div>
	<div class="div_left">Left</div>
		<p class="clear"></p>
	<div class="div_right1">Right1</div>
		<p class="clear"></p>
	<div class="div_left1">Left1</div>
	<div class="div_left">Left</div>
	<div class="div_left">Left</div>
		<p class="clear"></p>
	<div class="div_left1">Left1</div>	
		<p class="clear"></p>
	<div class="div_left1">Left1</div>	
		<p class="clear"></p>
	<div class="dot">Dot</div>	

</div>

 

I also didn't indent a great deal, this seems readable to me as everything is contained and self explanatory.

 

also...the code you supplied.  that will come in handy for testing.  great!

 

 

Link to comment
Share on other sites
crmamx Advanced Member

crmamx

Posted
Posted

I have been thru all this and agree with freakie. Except I find netbeans too complicated for me and use Komodo. It gives you the ability to preview your code real time as you make changes as long as you are not using php.

Link to comment
Share on other sites
cssfreakie Regular Member

cssfreakie

Posted
Posted

freakie...Had a look at that question mark and thought I'd give it  a whirl while at work.

 

also...the code you supplied.  that will come in handy for testing.  great!

 

I think you just posted your thing in someone else his thread. Also the code above is not mine (i would not have made that) i just made it fixed it a bit.

Link to comment
Share on other sites
cssfreakie Regular Member

cssfreakie

Posted
Posted

---soz, i posted the reply to your question mark thing, soz for hijacking.

 

if you only modified it...is there something inherently wrong with it or is it just the lack of grid etc that you don't like.

 

I really don't want to cock up site #2.

the code you give works although I wouldn't have used special <p>'s with a break property, but just the div's them-self, but you understand the concept i think, so it's good

Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.