Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    May 2004
    Posts
    38
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Simple CSS Prob - Setting Cloumns inside DIV

    I'm just entering the realm of CSS layout -- getting away from tables, and I'm trying to accomplish a pretty simple layout technique. Basically I've created a box with a grey background with an id of this code:

    Code:
    #info {
    	background-color: #BFBFBF;
    	height: 180px;
    	width: 764px;
    	margin-top: 10px;
    }
    Then, I want to put one column of one Image (a section head ), then right under that, another image (a project title head) -- both of which are identical width, and their heights add up to the height of the box mentioned above. This is the CSS for that section:

    Code:
    #sectionhead {
    	position: relative;
    	left: 20px;
    	top: 0px;
    	margin: 0px;
    	padding: 0px;
    	height: 180px;
    	width: 248px;
    }
    Then, within the same box, I want a sized text box 74px to the right of the images and 402px x 121px, again here's the CSS:

    Code:
    #textcontent {
    	position:relative;
    	left: 342px;
    	top: 49px;
    	width: 402px;
    	height: 121px;
    }
    And here's how I've organized the DIV tages:

    Code:
    <div align="left" id="info">
    		<div align="left" id="sectionhead">
    		<img src="images/section_about.gif" width="248" height="49" /><br />
    		<img src="images/title_project_placehold.gif" width="248" height="131" /></div>
    		<div id="textcontent"><p>Lorem ipsum sit dolor amet... </p></div>
    	</div>
    I've nested both the column tags inside the box tag, so I assumed it would position everything relative to that, but that hasn't been the case. The 'sectionhead' positions fine, but then the 'textcontent' seems to position relative to the 'sectionhead'. So I guess my question is, what's the best way to organize this correctly? If I can in the right direction, should I just use a negative number to position the top part of the textcontent? Thanks for any help and here's a link to it's display in a browser...

    http://www.ascendvisual.com/fromdavy...layout_css.php

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Can you like draw a picture of you what you want? Even just a rough sketch, like in mspaint will be fine? With the picture, I can probably work something up that you can use. I am a visual learner.

  • #3
    New Coder
    Join Date
    May 2004
    Posts
    38
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hey, thanks for your response. I've attached a GIF of the layout of the site. Hopefully this will help, thanks again...
    Attached Thumbnails Attached Thumbnails Simple CSS Prob - Setting Cloumns inside DIV-fromdavy_screenshot.gif  

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Here you go, I think you should be able to work with this. You might only have to use one image. I used absolute urls to your images on your server. They all line up now like they should.
    Last edited by _Aerospace_Eng_; 05-22-2005 at 04:33 AM.

  • #5
    New Coder
    Join Date
    May 2004
    Posts
    38
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Wow, thanks a lot! I appreciate this so much, I should be able to adapt it perfectly! Thanks again...

  • #6
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Down load the newer one, it has your images lined up as well.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •