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 to the CF scene
    Join Date
    Mar 2013
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    It's been a long time, div's, min/max widths...

    I'm working on a new project, it's been 3 years since I last developed anything... I'm starting to become frustrated as I don't seem to remember too much. For starters, I need help with overflows. In my header, I have a few text links inside of a div. The div has a min-width attribute of 540px to prevent the box from shrinking past the text. However, when I shrink the page to test it, the text just goes to the next line, rather than staying inline with the box. My guess is the box shrinking past the given attribute?

    Code:
    <div id="topbar">
        <div class="logo">
            <img src="images/logo.png" width="436" height="58" alt="" />
        </div>
        <div class="triple_links">
            <p><span class="current"><a href="#">Home Stream</a></span><a href="#">Lurk Around</a><a href="#">My Network</a></p>
        </div>
    </div>
    Code:
    div#topbar {
    	width:100%;
    	min-width:;
    	max-width:none;
    	height:58px;
    	min-height:58px;
    	max-height:58px;
    	background-color:#000000;
    	padding:0px;
    	margin:0px;
    	text-align:right;
    	vertical-align:middle;
    }
    
    div#topbar .logo {
    	float:left;
    	width:436px;
    	height:58px;
    }
    
    div#topbar .triple_links {
    	width:auto;
    	min-width:540px;
    	height:58px;
    }
    
    div#topbar .triple_links p {;
    	padding-top:12px;
    	padding-right:0px;
    	padding-bottom:0px;
    	padding-left:0px;
    	margin:0px;
    	
    }
    
    div#topbar .triple_links a:link {
    	color:#ffffff;
    	font-family:"tekton Pro", "Tekton Pro Cond", "Tekton Pro Ext", "Times New Roman";
    	font-size:30px;
    	font-style:normal;
    	font-variant:normal;
    	text-decoration:none;
    	margin-right:20px;
    }
    
    div#topbar .triple_links a:hover {
    	color:#ffffff;
    	font-family:"tekton Pro", "Tekton Pro Cond", "Tekton Pro Ext", "Times New Roman";
    	font-size:30px;
    	font-style:normal;
    	font-variant:normal;
    	text-decoration:none;
    	margin-right:20px;
    }
    
    div#topbar .triple_links a:active {
    	color:#ffffff;
    	font-family:"tekton Pro", "Tekton Pro Cond", "Tekton Pro Ext", "Times New Roman";
    	font-size:30px;
    	font-style:normal;
    	font-variant:normal;
    	text-decoration:none;
    	margin-right:20px;
    }
    
    div#topbar .triple_links a:visited {
    	color:#ffffff;
    	font-family:"tekton Pro", "Tekton Pro Cond", "Tekton Pro Ext", "Times New Roman";
    	font-size:30px;
    	font-style:normal;
    	font-variant:normal;
    	text-decoration:none;
    	margin-right:20px;
    }
    
    div#topbar .triple_links span.current {
    	text-shadow:2px 2px 2px 2px #ffffbe;
    	-moz-text-shadow:2px 2px 2px 2px #ffffbe;
    }

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,826 Times in 1,810 Posts
    Hello mSidelka,
    Ok, a bit of a mess there...

    line by line:

    If #topbar is 100% width of it's parent body minus the default 8px margin, then min-width:;max-width:none; isn't doing anything. min-height:58px;max-height:58px; isn't doing anything either since you've already set the height at 58px;

    I think maybe vertical-align:middle; does not do what you think it does.

    #topbar .logo at 436px wide and #topbar .triple_links at >540px wide = 976px wide at the narrowest.
    Not sure what width: auto; is intended for there.

    Since your Home Stream, Lurk Around and My Network are not a paragraph... wrapping them in <p> tags may not be semantic. Anchors can do just fine on their own or you can gain even more control over them when presented in an unordered list.

    Wehn you style your links, remember the LoVeHA rule - :link, :visited, :hover, :active is the order you want to present them in.

    ...
    To explain why your links drop when you narrow the browser, look again at the width you've given .triple_links. Your min-width of 540px is not wide enough to contain all that text on one line.
    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

  • #3
    New to the CF scene
    Join Date
    Mar 2013
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you Excavator. I overlooked that I did not have a min-width assigned for the parent "topbar" div. Assigning that to 976px did the trick there.

    Now, moving onto the content. I'm basically working on a four column format in this example. I have a 80px left menu, and a 196px right menu. the two middle are meant to be filling, and equal. I currently have this set up using div's, and assigning float:left; to each of them. Much like above, I did a few min and max widths. Currently, on my laptop, all the content fits in place while on full screen. On my PC, the right most div, breaks down to a line (less wide resolution on my PC). I'm pretty sure I am adding all of my divs up to be a full width (all four columns) min at 1000px (to fit a 1280x1024 res), and a max at 1300px. Same problem, when you shrink the web browser's window, the divs start to form on new lines, rather than shrinking and staying in the same line. Here are the pages.

    Code:
    @charset "utf-8";
    /* CSS Document */
    
    body {
    	padding:0px;
    	margin:0px;
    	background-color:#000025;
    	background-image:url(../images/background.png);
    	background-repeat:no-repeat;
    	background-position:top left;
    }
    
    div#topbar {
    	width:100%;
    	min-width:976px;
    	height:58px;
    	background-color:#000000;
    	padding:0px;
    	margin:0px;
    	text-align:right;
    }
    
    div#topbar .logo {
    	float:left;
    	width:436px;
    	height:58px;
    }
    
    div#topbar .triple_links {
    	width:auto;
    	min-width:540px;
    	height:58px;
    }
    
    div#topbar .triple_links p {
    	padding-top:12px;
    	padding-right:0px;
    	padding-bottom:0px;
    	padding-left:0px;
    	margin:0px;
    	
    }
    
    div#topbar .triple_links a:link {
    	color:#ffffff;
    	font-family:"tekton Pro", "Tekton Pro Cond", "Tekton Pro Ext", "Times New Roman";
    	font-size:30px;
    	font-style:normal;
    	font-variant:normal;
    	text-decoration:none;
    	margin-right:20px;
    }
    
    div#topbar .triple_links a:hover {
    	color:#ffffff;
    	font-family:"tekton Pro", "Tekton Pro Cond", "Tekton Pro Ext", "Times New Roman";
    	font-size:30px;
    	font-style:normal;
    	font-variant:normal;
    	text-decoration:none;
    	margin-right:20px;
    }
    
    div#topbar .triple_links a:active {
    	color:#ffffff;
    	font-family:"tekton Pro", "Tekton Pro Cond", "Tekton Pro Ext", "Times New Roman";
    	font-size:30px;
    	font-style:normal;
    	font-variant:normal;
    	text-decoration:none;
    	margin-right:20px;
    }
    
    div#topbar .triple_links a:visited {
    	color:#ffffff;
    	font-family:"tekton Pro", "Tekton Pro Cond", "Tekton Pro Ext", "Times New Roman";
    	font-size:30px;
    	font-style:normal;
    	font-variant:normal;
    	text-decoration:none;
    	margin-right:20px;
    }
    
    div#topbar .triple_links span.current {
    	text-shadow:2px 2px 2px 2px #ffffbe;
    	-moz-text-shadow:2px 2px 2px 2px #ffffbe;
    }
    
    div.shadowbar {
    	width:100%;
    	height:143px;
    	background-image:url(../images/bar-shadow.png);
    	background-repeat:repeat-x;
    	background-position:top;
    }
    
    div.shadowbar .color-blur {
    	float:left;
    	width:384px;
    	height:143px;
    	background-image:url(../images/color-blur.png);
    	background-repeat:no-repeat;
    }
    
    div.content-container {
    	margin:0px;
    	padding:0px;
    	max-width:1400px;
    	background:none;
    	border:none;
    	display:block;
    }
    
    div.filters {
    	margin-top:0px;
    	margin-right:-20px;
    	margin-bottom:0px;
    	margin-left:0px;
    	padding-top:0px;
    	padding-right:0px;
    	padding-bottom:0px;
    	padding-left:20px;
    	width:80px;
    	height:auto;
    	vertical-align:top;
    	border:none;
    	float:left;
    }
    
    div.content {
    	margin:0px;
    	padding:0px;
    	min-width:724px;
    	vertical-align:top;
    	border:none;
    	float:left;
    }
    
    div.side-bar {
    	margin-top:0px;
    	margin-right:0px;
    	margin-bottom:0px;
    	margin-left:6px;
    	padding:0px;
    	width:196px;
    	vertical-align:top;
    	border:none;
    	float:left;
    }
    Code:
    @charset "utf-8";
    /* CSS Document */
    
    .filterbox {
    	margin:0px;
    	margin-top:0px;
    	margin-right:0px;
    	margin-bottom:5px;
    	margin-left:0px;
    	padding:0px;
    	width:40px;
    	height:40px;
    	border:0px;
    	display:block;
    }
    
    .fblue {
    	background-color:#0101C5;
    }
    
    .fred {
    	background-color:#C50101;
    }
    
    .fgreen {
    	background-color:#01C51C;
    }
    
    .fyellow {
    	background-color:#C5C301;
    }
    
    .fgrey {
    	background-color:#C5C5C5;
    }
    
    .fpurple {
    	background-color:#C502C5;
    }
    
    .forange {
    	background-color:#C57502;
    }
    Code:
    @charset "utf-8";
    /* CSS Document */
    
    div.leftstream-container {
    	margin-top:0px;
    	margin-right:4px;
    	margin-bottom:5px;
    	margin-left:0px;
    	padding:0px;
    	min-width:360px;
    	max-width:510px;
    	height:auto;
    	display:inline-block;
    	overflow:hidden;
    }
    
    div.rightstream-container {
    	margin-top:0px;
    	margin-right:6px;
    	margin-bottom:5px;
    	margin-left:0px;
    	padding:0px;
    	min-width:360px;
    	max-width:510px;
    	height:auto;
    	display:inline-block;
    	overflow:hidden;
    }
    
    .storyhead {
    	margin-top:0px;
    	margin-right:0px;
    	margin-bottom:5px;
    	margin-left:0px;
    	padding:0px;
    	width:100%;
    	min-width:360px;
    	max-width:510x;
    	height:auto;
    	text-align:left;
    	vertical-align:text-bottom;
    }
    
    .storyhead img {
    	float:left;
    	width:75px;
    	min-width:75px;
    	max-width:75px;
    	height:75px;
    	min-height:75px;
    	max-height:75px;
    	border:none;
    }
    
    .storyhead h1 {
    	margin:0px;
    	padding-top:20px;
    	padding-right:0px;
    	padding-bottom:0px;
    	padding-left:0px;
    	font-family:"Myriad Web Pro", Arial, "Lucida Console";
    	font-size:20px;
    	color:#FFFFFF;
    }
    
    .storyhead h2 {
    	margin:0px;
    	padding:0px;
    	font-family:"Myriad Web Pro", Arial, "Lucida Console";
    	font-size:14px;
    	color:#FFFFFF;
    }
    
    .storybody {
    	margin:0px;
    	padding:0px;
    	border-top:none;
    	border-right:none;
    	border-bottom:none;
    }
    
    .storybody p {
    	margin:0px;
    	padding-top:0px;
    	padding-right:0px;
    	padding-bottom:0px;
    	padding-left:5px;
    	font-family:"Myriad Web Pro", Arial, "Lucida Console";
    	font-size:14px;
    	text-align:justify;
    	text-indent:5px;
    	color:#FFFFFF;
    }
    
    .borderblack {
    	border-left:#131322 solid 3px;
    }
    
    .borderblue {
    	border-left:#0101C5 solid 3px;
    }
    
    .borderred {
    	border-left:#C50101 solid 3px;
    }
    
    .bordergreen {
    	border-left:#01C51C solid 3px;
    }
    
    .borderyellow {
    	border-left:#C5C301 solid 3px;
    }
    
    .bordergrey {
    	border-left:#C5C5C5 solid 3px;
    }
    
    borderpurple {
    	border-left:#C502C5 solid 3px;
    }
    
    .borderorange {
    	border-left:#C57502 solid 3px;
    }
    
    .storyfoot {
    	margin:0px;
    	margin-top:0px;
    	margin-right:0px;
    	margin-bottom:0px;
    	margin-left:0px;
    	padding:0px;
    	padding-top:0px;
    	padding-right:0px;
    	padding-bottom:0px;
    	padding-left:8px;
    	width:100%;
    	min-width:360px;
    	max-width:510px;
    	height:30px;
    	min-height:30px;
    	max-height:30px;
    	text-align:left;
    	vertical-align:middle;
    }
    
    .storyfoot p {
    	margin:0px;
    	margin-top:0px;
    	margin-right:0px;
    	margin-bottom:0px;
    	margin-left:0px;
    	padding:0px;
    	padding-top:0px;
    	padding-right:0px;
    	padding-bottom:0px;
    	padding-left:0px;
    	font-family:"Myriad Web Pro", Arial, "Lucida Console";
    	font-size:14px;
    	color:#FFFFFF;
    	text-align:left;
    	vertical-align:middle;
    }
    
    .sblack {
    	background-color:#131322;
    }
    
    .sblue {
    	background-color:#0101C5;
    }
    
    .sred {
    	background-color:#C50101;
    }
    
    .sgreen {
    	background-color:#01C51C;
    }
    
    .syellow {
    	background-color:#C5C301;
    }
    
    .sgrey {
    	background-color:#C5C5C5;
    }
    
    .spurple {
    	background-color:#C502C5;
    }
    
    .sorange {
    	background-color:#C57502;
    }
    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" href="stylesheets/essentials.css" type="text/css" />
    <link rel="stylesheet" href="stylesheets/filter-boxes.css" type="text/css" />
    <link rel="stylesheet" href="stylesheets/split-stream.css" type="text/css" />
    <title>Untitled Document</title>
    </head>
    <body>
    <div id="topbar">
        <div class="logo">
            <img src="images/logo.png" width="436" height="58" alt="" />
        </div>
        <div class="triple_links">
            <p><span class="current"><a href="#">Home Stream</a></span><a href="#">Lurk Around</a><a href="#">My Network</a></p>
        </div>
    </div>
    <div class="shadowbar">
        <div class="color-blur">
        </div>
    </div>
    
    <!-- Start Body -->
    <div class="content-container">
    	<img src="images/spacer.png" width="1000px" height="1px" border="none" /><br />
    	<div class="filters">
            <div class="filterbox fblue"></div>
            <div class="filterbox fred"></div>
            <div class="filterbox fgreen"></div>
            <div class="filterbox fyellow"></div>
            <div class="filterbox fgrey"></div>
            <div class="filterbox fpurple"></div>
            <div class="filterbox forange"></div>
        </div>
        <div class="content">
            <div class="leftstream-container">
                <div class="storyhead">
                <img src="userimg/profilepics/msidelka.jpg" alt="" />
                <h1>Michael Sidelka</h1>
                <h2>Posted a news update</h2>
                <h2>@$_{Time_Frame}</h2>
                </div>
                <div class="storybody borderblack">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam aliquet rhoncus neque eu luctus. Sed imperdiet ultrices ultrices. Praesent rhoncus ligula eu purus aliquam quis porta nibh rutrum. Donec pharetra sapien id augue laoreet vehicula. Praesent quis augue odio, vitae congue massa. Proin non odio id lacus convallis mollis. Duis eget nisl justo. Etiam vehicula bibendum lacus a placerat. Donec pulvinar hendrerit accumsan. Nulla dapibus, orci et varius lacinia, erat leo semper tortor, quis tempor lorem libero at diam. Fusce laoreet, mi vitae faucibus egestas, sapien neque facilisis est, eu rutrum neque magna nec massa. Curabitur odio nulla, tempor et dictum eget, luctus at orci. Pellentesque vestibulum aliquam lorem ac dignissim.</p>
                </div>
                <div class="storyfoot sblack">
                <p>Add Comment.</p>
                </div>
            </div>
            <div class="rightstream-container">
                <div class="storyhead">
                    <img src="userimg/profilepics/msidelka.jpg" alt="" />
                    <h1>Michael Sidelka</h1>
                    <h2>Posted a news update</h2>
                    <h2>@$_{Time_Frame}</h2>
                </div>
                <div class="storybody bordergreen">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam aliquet rhoncus neque eu luctus. Sed imperdiet ultrices ultrices. Praesent rhoncus ligula eu purus aliquam quis porta nibh rutrum. Donec pharetra sapien id augue laoreet vehicula. Praesent quis augue odio, vitae congue massa. Proin non odio id lacus convallis mollis. Duis eget nisl justo. Etiam vehicula bibendum lacus a placerat. Donec pulvinar hendrerit accumsan. Nulla dapibus, orci et varius lacinia, erat leo semper tortor, quis tempor lorem libero at diam. Fusce laoreet, mi vitae faucibus egestas, sapien neque facilisis est, eu rutrum neque magna nec massa. Curabitur odio nulla, tempor et dictum eget, luctus at orci. Pellentesque vestibulum aliquam lorem ac dignissim.</p>
                </div>
                <div class="storyfoot sgreen">
                    <p>Add Comment.</p>
                </div>
            </div>
        </div>
        <div class="side-bar">
        	<p>Test</p></div>
    </div>
    </body>
    </html>

  • #4
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,455
    Thanks
    0
    Thanked 632 Times in 622 Posts
    Only min-width should ever be set using px. For width you should use either % or em and always use em for max-width as if a column goes over 35em wide it becomes unreadable.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #5
    New to the CF scene
    Join Date
    Mar 2013
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    By only defining a min width attribute on these divs, they are extending to be 100% of the page, rather than 100% of it's parent. I have a parent div (container) of 100% width. Then three divs, one at 80px, one at 196px. The middle div only has a min width, to prevent stacking upon skinny windows. This middle div, fills to 100% of the page, rather than filling in the left over space from the other two divs. Am I going about this all wrong?

    Here is the structure I am trying to create. Keep in mind, the middle section has two divs in it, that I want to be in equal width. I tried assigning them a 50% width, but it just becomes 50% of the page.


  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,826 Times in 1,810 Posts
    Quote Originally Posted by mSidelka View Post
    Here is the structure I am trying to create. Keep in mind, the middle section has two divs in it, that I want to be in equal width. I tried assigning them a 50% width, but it just becomes 50% of the page.
    See what this does for you. I put a height on each column that you probably would want to leave off. You would also need a min-width set on it that I didn't do either...
    Code:
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
    	<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
    <style type="text/css">
    html, body {
    	width: 100%;
    	margin: 0;
    	background: #fc6;
    	font: 100% "Trebuchet MS", Arial, Helvetica, sans-serif;
    	color: #fff;
    }
    		/* HTML5 tags */
    		header, section, footer,
    		aside, nav, article, figure {display: block;}
    #container {
    	width: 80%;
    	margin: 30px auto;
    	overflow: auto;
    	background: #000;
    	text-align: center;
    }
    header {
    	height: 50px;
    	margin: 10px 0 0;
    	border-top: 4px solid #fff;
    	border-bottom: 4px solid #fff;
    }
    		#left, #right, #contentL, #contentR {height: 300px; /*demo only*/}
    			#left {
    				width: 80px;
    				float:left;
    				border-right: 4px solid #fff;
    			}
    			#right{
    				width: 196px;
    				float:right;
    				border-left: 4px solid #fff;
    			}
    			#middle{
    				margin: 0 200px 0 84px;
    				overflow: auto;
    			}
    				#contentL {
    					width: 50%;
    					float: left;
    					background: #ccc;
    				}
    				#contentR {
    					overflow: auto;
    					background: #00f;
    				}
    footer {
    	line-height: 30px;
    	background: #360;
    }
    </style>
    </head>
    <body>  
        <div id="container">
    		<header>
    			Header
    		</header>
    				<div id="left">Left</div>
    				<div id="right">Right</div>
    				<div id="middle">
    					<div id="contentL">Left Content</div>
    					<div id="contentR">Right Content</div>
    				<!--end middle--></div>
    		<footer>
    			footer stuff here
    		</footer>
        <!--end container--></div>
    </body>
    </html>
    Seems to work fine as far back as IE7.


    .
    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


  •  

    Posting Permissions

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