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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 16
  1. #1
    New Coder
    Join Date
    Oct 2011
    Posts
    12
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Need help with expanding div with column

    Hello!

    I am creating a webpage and have stumbled uppon a problem.

    I have a main section(wrapper), and 2 lines that split the columns( lines are shown as dashed bg vertical lines).

    Now my problem is, that when i fill a div with text, the div with the bg dashed line does not stretch with the text div. I tried setting the div height to 100%, but that did not help me at all.

    Any clues? I am desperate
    And the code:

    Code:
    #wrapper {
    	width:980px;
    	height:auto;
    	background-color:#f4f4f4;
    }
    #wrapperLEFTLINE{
    	width:36px;
    	height:400px;
    	float:left;
    	clear:left;
    	background-image:url(images/dashed.jpg);
    	background-repeat:repeat-y;
    }
    #wrapperABOUT{
    	width:237px;
    	height:auto;
    	float:left;
    	clear:none;
    }
    #wrapperLINE1{
    	width:10px;
    	height:400px;
    	float:left;
    	clear:none;
        background-image:url(images/dashed2.jpg);
    	background-repeat:repeat-y;
    }
    #wrapperMAIN{
    	width:408px;
    	height:auto;
    	float:left;
    	clear:none;
    }
    
    #wrapperLINE2 {
    	width:12px;
    	height:400px;
    	float:left;
    	clear:none;
        background-image:url(images/dashed3.jpg);
    	background-repeat:repeat-y;
    }

  • #2
    New Coder
    Join Date
    Apr 2012
    Posts
    29
    Thanks
    5
    Thanked 4 Times in 4 Posts
    Have you tried setting the divs #leftline #line1 and #line2 height:auto and then the #main and #about divs height:100%?

    Maybe that might work?

    Paul

  • #3
    New Coder
    Join Date
    Apr 2012
    Posts
    29
    Thanks
    5
    Thanked 4 Times in 4 Posts
    I apologise, I don't think that would work.
    When I'm next to my computer I will play around with it and hopefully provide an answer. (that is is someone else already hasn't )

    Paul

  • #4
    New Coder
    Join Date
    Oct 2011
    Posts
    12
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thank you for your effort! I am really gratefull for your help!

    All i basically need is a line division between two columns of text, so if you can provide an easier way to do so, i guess that would work too

    And again, thank you for your help!

  • #5
    New Coder
    Join Date
    Apr 2012
    Location
    Netherlands
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I think if you look at Faux Columns (http://nopeople.com/CSS%20tips/faux_columns/index.html) you can use these techniquest partially to recreate this.

    also, the lines seem to currently have a static height, try changing this to min-height, maybe that already fixes the issues, for right now they probably simply don't stretch beyond 400px.

  • #6
    New Coder
    Join Date
    Oct 2011
    Posts
    12
    Thanks
    2
    Thanked 0 Times in 0 Posts
    im sorry, i forgot to change them back when pasting. The height for the lines was set to height:auto; but for design purposes i changed it to 400px so i could edit inside those lines. But i still have no idea which part of the code is missing? I already tried everything i can think off but nothing seemed to work :/

  • #7
    New Coder
    Join Date
    Oct 2011
    Posts
    12
    Thanks
    2
    Thanked 0 Times in 0 Posts
    also for this site ( http://nopeople.com/CSS%20tips/faux_...ndex.html#html )

    I actually need a dashed line not a solid one.

  • #8
    New Coder
    Join Date
    Oct 2011
    Posts
    12
    Thanks
    2
    Thanked 0 Times in 0 Posts
    If no other way, i just thought of a "hack"( i think it would work, but its not as clean and takes more space for opening the site)

    A BG image that includes the left and right lines all in one div&in one image. That way, the division is the height of the text, also the lines are in the same division, because there is only one bg image(lets say 3px of height).

    But still, it would be way better to fix the question that i asked if anyone else has any ideas

  • #9
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,672
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello zenkkor,
    So you're 3px high image is repeated on the y axis and makes the dotted line between your columns?

    That is faux columns method.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #10
    New Coder
    Join Date
    Oct 2011
    Posts
    12
    Thanks
    2
    Thanked 0 Times in 0 Posts
    But still its not what i am looking for :/

  • #11
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,672
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by zenkkor View Post
    But still its not what i am looking for :/
    That's a little vague zenkkor. Maybe a link to the test site would help, since your question involves images we don't have. A little more explanation of the problem would help as well, or maybe we'd see right off once we view the site.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #12
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,672
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    I think you may not be understanding the faux columns method. In the example I'll post below, the image is repeated on the y axis as a background of #container... not as a background or border of either column.

    To do mulitiple columns with your dashed border, you would need to create an image similar to the one in the faux columns demo you've been linked to but with your dashed image spaced out the pixel width of your columns.

    example -
    Code:
    <!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>Untitled Document</title>
    <style type="text/css">
    html, body {
    	margin: 0;
    	background: #fc6;
    }
    #container {
    	width: 800px;
    	margin: 30px auto;
    	background: #f4f4f4 url(http://www.modrimediji.si/site/images/dashed3.jpg) repeat-y center;
    	overflow: auto;
    }
    #left, #right {
    	padding: 25px;
    	background: #fff;
    }
    #left {
    	width: 300px;
    	margin: 25px;
    	float: left;
    }
    #right {margin: 25px 25px 25px 425px;}
    </style>
    </head>
    <body>
        <div id="container">
        	<div id="left">
                <p>
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna 
                    aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
                    sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam 
                    nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo 
                    duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                </p>
                <p>
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna 
                    aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
                    sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam 
                    nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo 
                    duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                </p>
            <!--end left--></div>
            <div id="right">
            <!--end right--></div>
        <!--end container--></div>
    </body>
    </html>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    zenkkor (05-12-2012)

  • #13
    New Coder
    Join Date
    Oct 2011
    Posts
    12
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Hey! Thank you for the help, but what i actually have 3 divs with text, and on each div an outer and an inner border. So this method with just centering one dashed line does not really help me all that much. Or is it just me that does not understand how to incorporate this to three divs?

    +I still need to keep the exact position and width of the divs that contain text.

  • #14
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,672
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by zenkkor View Post
    Or is it just me that does not understand how to incorporate this to three divs?
    I'm not the greatest at PS but this image (see attached image) only took me 5 minutes to make. If you decide to go with this method you may want to make a better image ... or not.
    Look what it can do for you when you repeat it on the y axis in a container like this -
    Code:
    <!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>Untitled Document</title>
    <style type="text/css">
    html, body {
    	margin: 0;
    	background: #fc6;
    }
    #container {
    	height: 600px; /*demo only*/
    	width: 980px;
    	margin: 30px auto;
    	background: #f4f4f4 url(y_dashes.jpg) repeat-y;
    }
    </style>
    </head>
    <body>
        <div id="container">
    	<!--end container--></div>
    </body>
    </html>
    Attached Thumbnails Attached Thumbnails Need help with expanding div with column-y_dashes.jpg  
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #15
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,672
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Now you can start putting things on top of that. Just grabbed a few things out of your image directory and came up with this -
    Code:
    <!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>Untitled Document</title>
    <style type="text/css">
    html, body {
    	margin: 0;
    	background: #fc6;
    }
    #container {
    	width: 980px;
    	margin: 30px auto;
    	background: #f4f4f4 url(y_dashes.jpg) repeat-y;
    	overflow: auto;
    }
    #hdrImg {
    	margin: 158px 0 0;
    	display: block;
    }
    #content { 
    	background: url(http://www.modrimediji.si/site/images/index_04.jpg) no-repeat top; 
    	padding: 86px 0 0;
    	overflow: auto;
    }
    	#left {
    		width: 225px;
    		margin: 0 0 0 30px;
    		padding: 10px;
    		float: left;
    	}
    	#right {
    		width: 225px;
    		margin: 0 37px 0 0;
    		padding: 10px;
    		float: right;
    	}
    	#center {
    		margin: 0 287px 0 280px;
    		padding: 10px;
    	}
    </style>
    </head>
    <body>
        <div id="container">
       	  <img src="http://www.modrimediji.si/site/images/index_03.jpg" alt="description" width="980" height="250" id="hdrImg" />
          	<div id="content">
                <div id="left">
                <p>
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna 
                    aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
                    sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam 
                    nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo 
                    duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                </p>
                <!--end left--></div>
                    <div id="right">
                <p>
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna 
                    aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
                    sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam 
                    nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo 
                    duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                </p>
                    <!--end right--></div>
                        <div id="center">
                <p>
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna 
                    aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
                    sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam 
                    nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo 
                    duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                </p>
                        <!--end center--></div>
            <!--end content--></div>
    	<!--end container--></div>
    </body>
    </html>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    zenkkor (05-12-2012)


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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