Div Layout

Dear All,
I like one design, that is made by div table. I have a best knowledge in table based layout.
Div based layout is attached for your reference.
please help out this, how can make container like this
I am making something like this, my codes are attached for your references.
<!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=UTF-8" />
<title>Untitled Document</title>
<link href="untitled.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div align="justify">Container
    <div id="rightside">Right Side </div>
    <div id="leftside">Left Side Navigation </div>
</div>
</div>
<div id="footer">Footer</div>
</body>
</html>
@charset "UTF-8";
#container {
          width: 960px;
          margin-top: 0px;
          margin-right: auto;
          margin-left: auto;
          margin-bottom: 0px;
#leftside {
          width: 420px;
#rightside {
          width: 420px;
          float: right;
#footer {
          width: 960px;
          margin-top: 0px;
          margin-right: auto;
          margin-bottom: 0px;
          margin-left: auto;

See if the below html/css helps:
<!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=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
#wrapper {
    width: 980px;
    margin: 0 auto;
#header {
    overflow: hidden;
#headerLeft {
    float: left;
    width: 600px;
#headerRight {
    float: right;
    width: 380px;
#mainAreaWrapper {
    overflow: hidden;
#mainAreaLeft {
    float: left;
    width: 240px;
#mainAreaRight {
    float: left;
    width: 740px;
#mainAreaTop {
    min-height: 320px;
    background-color: #CCC;
    margin-bottom: 15px;
        -moz-border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;
#mainAreaBlueBox {
    min-height: 250px;
    float: left;
    width: 450px;
    background-color:#09C;
    -moz-border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;
#mainAreaGreenBox {
    min-height: 250px;
    float: left;
    width: 280px;
    margin-left: 10px;
    background-color:#6C3;
    -moz-border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="headerLeft">Header Left</div>
<div id="headerRight">Header Right</div>
</div>
<div id="mainAreaWrapper">
<div id="mainAreaLeft">Main Area Left</div>
<div id="mainAreaRight">
<div id="mainAreaTop">Main Area Top</div>
<div id="mainAreaBlueBox">Blue Box</div>
<div id="mainAreaGreenBox">Green Box</div>
</div>
</div>
<div id="footer">Footer</div>
</div>
</body>
</html>

Similar Messages

Div layout breaks apart

I have created a CSS div layout contained within an overall
div so I can syle layout to a fixed width.
I have styled container "overflow: hidden" but internal divs
still break apart in IE.
I have reduced px width of center content div but that makes
no difference either.
Site URL is:
http://dstall.com/oft/
Layout should look like this screenshot:
http://dstall.com/oft/PIX/Screenshot.jpg
but in IE it's breaking apart like in screenshot2:
http://dstall.com/oft/PIX/Screenshot2.jpg

See if the below html/css helps:
<!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=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
#wrapper {
    width: 980px;
    margin: 0 auto;
#header {
    overflow: hidden;
#headerLeft {
    float: left;
    width: 600px;
#headerRight {
    float: right;
    width: 380px;
#mainAreaWrapper {
    overflow: hidden;
#mainAreaLeft {
    float: left;
    width: 240px;
#mainAreaRight {
    float: left;
    width: 740px;
#mainAreaTop {
    min-height: 320px;
    background-color: #CCC;
    margin-bottom: 15px;
        -moz-border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;
#mainAreaBlueBox {
    min-height: 250px;
    float: left;
    width: 450px;
    background-color:#09C;
    -moz-border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;
#mainAreaGreenBox {
    min-height: 250px;
    float: left;
    width: 280px;
    margin-left: 10px;
    background-color:#6C3;
    -moz-border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="headerLeft">Header Left</div>
<div id="headerRight">Header Right</div>
</div>
<div id="mainAreaWrapper">
<div id="mainAreaLeft">Main Area Left</div>
<div id="mainAreaRight">
<div id="mainAreaTop">Main Area Top</div>
<div id="mainAreaBlueBox">Blue Box</div>
<div id="mainAreaGreenBox">Green Box</div>
</div>
</div>
<div id="footer">Footer</div>
</div>
</body>
</html>

Issues with floated DIV layout

Hi I am having problems with my floated DIV layout on the following site in I.E 6/7 but not 8.
I have tried display: inline thinking it may be a margin/padding issue?
http://www.sopasbeauty.co.uk
what am I doing wrong, should I be adding clearfloats to separate area's of the page??
Mark

First, open the page in DW and use FILE | Convert > XHTML 1.0 Transitional. Then try changing this -
<div class="boxes" id="box1">
<h1>Acrylic Nails</h1>

Design View and a CSS Div layout page

There are a few pages l
ike this. I am assuming it is because everything is layed out w
ith div tags, but there mush be a way to correct the desging view. Everything shows up great o
nline. Here is a screenshot:
Here is the code:
<body onload="initHomePage(); addReferToLinks();">

<script type="text/javascript" src="/shared_assets/toolbar_v2/toolbar.js"></script>

<img src="/profile/image/logo_linknet.gif" />

<form name="frmSearch" action="" method="get" title="Resources" class="scopedSearch">
       <input class="textInput" name="qt" value="THIS SECTION ONLY" id="searchField" size="20" />
       <input class="button" type="submit" value="Search" name="submit" />
       <input type=hidden name="col" value="mpr dno dnos1" />
</form>
    <div id="main">

<div id="newsBox" class="box">
   <div class="boxHeader">
    <div class="headerLeft"><h2>MP News</h2></div>
    <div class="headerRight"><a href="/news/news/index.htm" class="more">more »</a></div>
   </div>
   <div class="boxContent">
    <h3>
     <script type="text/javascript">var x=new Date(); document.write(x.toLocaleDateString());</script>
    </h3>
    <div id="newsContent">
     <div class="loading">
      Loading...
     </div>
    </div>
    
    <h3>My Subscriptions</h3>
     <ul style="list-style-type:none;">
      <li><a href="http://rss/">Setup Subscriptions - Get Help</a></li>
      <li><a href="http://">View Subscriptions</a></li>
     </ul>
    
    <div class="imgFrame"><a href=""><img src="image/mc_logo2.jpg" alt="Media Center" hspace="0" vspace="0" border="0" /></a></div>
    
    <div class="imgFrame"><a href="http/"><img src="image/columns.gif" hspace="0" vspace="0" border="0" alt="The Northwestern Columns" /></a></div>
   </div>
</div>


<div id="content">
   
   
   <div id="alert" class="box highlightBox">
    <div class="boxHeader">
     <div class="headerLeft"><h2>Important Notice</h2></div>
     <div class="headerRight"> </div>
    </div>
    <div id="alertContent" class="boxContent">
     <div class="article">
      <a href="" class="headline">Avoid lock out - Install LINK 22.2 now</a>
      Users who do not install LINK 22.2 before the version enforcement date of July 31 will be
      unable to access their PCs.
     </div>
    </div>
   </div>
            <div id="home_page_id">) Home Page</div>
   
   <div id="activities" class="box highlightBox">
    <div class="boxHeader">
     <div class="headerLeft">Welcome<span id="username"></span><h2>What would you like to do?</h2></div>
     <div class="headerRight"> </div>
    </div>
    <div class="boxContent">
     <div style="width:100%;">
      <ul>
       <li><a title="Find information and tools for recruiting new representatives" onmouseover="showTooltip(this);" onmouseout="hideTooltip(this);">Recruiting: <select style="font:message-box; width:19em;" onchange="if(this.value){window.navigate(appendReferer(this.value))};">
         <option name="selectRecruit" selected="selected">*** make selection ***</option>
         <option value="http.htm">Sourcing & Prospecting</option>
         <option value="http://.htm">Selecting & Assessing Candidates</option>
         <option value="http://_process.htm">Post Acceptance Process</option>
         <option value="http">Developing an Internship Program</option>
         <option value="http.htm">Tracking Activity, Results & Accountability</option>
         <option value="http://.htm">Recruiter Development</option>
        </select></a></li>
       <li><a href="/objective/mpr_secure/mp_ldorgdev.htm" title="Find information and tools for developing leaders in your office" onmouseover="showTooltip(this);" onmouseout="hideTooltip(this);">Leadership & Organizational Development </a></li>
       <li><a href="/objective/mpr_secure/mp_supvsn.htm" title="Find information and tools for effective supervision" onmouseover="showTooltip(this);" onmouseout="hideTooltip(this);">Supervision</a></li>
       <li><a href="/objective/mpr_secure/mp_stfop.htm" title="Find information and tools for   managing your office" onmouseover="showTooltip(this);" onmouseout="hideTooltip(this);">Staffing & Operations</a></li>
       <li><a href="/objective/mpr_secure/mp_plnperform.htm" title="Find information and tools for business planning and performance monitoring" onmouseover="showTooltip(this);" onmouseout="hideTooltip(this);">Planning & Performance</a></li>
          <li><a href="/objective/mpr_secure/mp_mngmntcompben.htm" title="Find information regarding income, fees, expenses, allowances and benefits" onmouseover="showTooltip(this);" onmouseout="hideTooltip(this);">Management Compensation & Benefits</a></li>
          <li><a href="/objective/mpr_secure/mp_repdev.htm" title="Find information and tools regarding mentoring and professional growth" onmouseover="showTooltip(this);" onmouseout="hideTooltip(this);">Representative & Specialist Development</a> </li>
      </ul>
      <div id="slideshow1" class="activitySlideshow" style="height:212px;">
       <img src="image/slideshow_photos/photo06.jpg" />
       <img src="image/slideshow_photos/photo07.jpg" />
       <img src="image/slideshow_photos/photo08.jpg" />
       <img src="image/slideshow_photos/photo09.jpg" />
       <img src="image/slideshow_photos/photo10.jpg" />
      </div>
     </div>
    </div>
   </div>
   
   <div class="leftColumn">
   
    <div class="box">
     <div class="boxHeader">
      <div class="headerLeft"><h2>Events Calendar</h2></div>
     </div>
      <div class="boxContent"><ul>
      <li>April 25-30<br />
     <a href="http_020110.htm" target="_blank"></a></li>
     <li>May 12-14<br />
     <a href="http://030510.htm" target="_blank"></a></li>
       <li>June 16<br />
     <a href="http://.htm" target="_blank">Series conversation</a></li>
                      </ul>
      </div>
    </div>
     
     <div class="box">
      <div class="boxHeader">
       <div class="headerLeft"><h2>Spotlight</h2></div>
       <div class="headerRight"> </div>
      </div>
      <div class="boxContent">
              <div class="article">
      
   <div class="headline"><a href="http.htm?tern Mutual Association dues decline form available</a> </div>
     The $25 association membership fee will be charged to June 30 home
     office supply bills. Representatives who wish to decline membership
     may submit a <a href="http://.htm" target="_blank">decline
     form</a>.
<div class="headline"><a href="http://.htm">Surplus notes information available</a> </div>
     Find answers to common questions and hear insights from about the company’s recent surplus notes offering.
                          <div class="headline"><a href="http://.htm">Stay up to date on 2010 estate tax repeal </a> </div>
     Consider the new Estate Tax Repeal page on LINKnet “home base” for information on the 2010 repeal and resources to use when talking to clients about this topic.
              <div class="headline"><a href="http/index.htm">Withstanding Market Challenges</a> </div>
     Access resources to highlight the company’s strength and stability, find sales strategies and share marketing and market-related materials to help address client concerns.
              <div class="headline"><a href="http:///year.htm">Dividend resources available</a> </div>
     The Current Year Scale page on LINKnet provides the latest information
     and sales support materials based on the 2010 dividend announcement.

               </div>
      </div>
     </div>
   </div>
   <div class="rightColumn">
   
    <div class="box">
     <div class="boxHeader">
      <div class="headerLeft"><h2>Approaching Deadlines</h2></div>
     </div>
     <div class="boxContent">
       <ul>
<li>April 30: <a href="http.htm">Submit 2010 Commitment to Excellence Award nbominee</a></li>
       <li>May 25: <a href="http.htm">Submit applications for Intern Community Service Award</a></li>
                      <li>June 30: <a href="http://pdf">Submit 2010 Managers Membership Award Application to NAIFA</a> <img src="/shared_assets/image/doc_icons/pdf.gif" alt="PDF File" /></li>
                      </ul>
      </div>
    </div>
    
    <div id="techalerts" class="box">
     <div class="boxHeader">
      <div class="headerLeft"><h2>Priority Tech Alerts</h2></div>
      <div class="headerRight"><a href="http://.htm" class="more">more »</a></div>
     </div>
     <div class="boxContent">
      <div class="loading">
       Loading...
      </div>
     </div>
     <iframe name="techalerts" src="/statusdisplay/001_summary.htm" onreadystatechange="if(this.readyState=='complete'){this.previousSibling.innerHTML = formatTechAlert(frames['techalerts'].document.body.innerHTML);}"></iframe>
    </div>
   </div>
</div>

Dreamweaver is pretty good these days at showing the page in Design View how it will be viewed when online. HOWEVER having said that it does largely depend on the way you write the css.
I guess for Dreamweaver it's impossible for it to show every concievable way you can write css correctly. Unfortuantely if your css is not compatible with what Dreamweaver likes it won't make a great job of rendering the site correctly in Design View, that's always been the case.
The css is not wrong but I've seen many display issues in Dreameaver Design View caused as a direct result of the css being overly complex to crack simple presentation. I guess it's in the lap of the gods if you are fortunate enough to have found the way to write css that Dreamweaver likes.

CS6 div layout issue

http://www.lestock.ca/index.html
I am having a problem with the layouts of the divs here.
As the page loads, the curved border placed around the container appears to load as a small oval, then proceeds to load correctly but there is a small space in the top corner.
I found it necessary to place <p> tags at the end of the side bar and the container in order for the page to maintain its full content.
Thanks
Message was edited by: Pat Krushen
CSS style sheet
@charset "utf-8";
/* CSS Document */
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #000000;
background-repeat: no-repeat;
background-color: #FFF;
background-position: 0px;
top: 0px;
background-attachment: fixed;
background-image: url();
.twoColLiqLtHdr #container {
width: 80%;
text-align: left; /* this overrides the text-align: center on the body element. */
overflow: visible;
background-color: #FFFFFF;
border: thin solid #060;
border-radius: 50px;
margin-right: auto;
margin-left: auto;
padding-top: 10px;
padding-right: 15px;
padding-bottom: 10px;
padding-left: 15px;
.twoColLiqLtHdr #header {
background-image: url(greencorner2.jpg);
background-repeat: no-repeat;
font-size: 90%;
background-color: #FFF;
width: 100%;
padding-top: 0;
padding-right: 0px;
padding-bottom: 0;
padding-left: 0px;
.twoColLiqLtHdr #header h1 {
margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
padding: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
/* Tips for sidebar1:
1. since we are working in percentages, it's best not to use padding on the sidebar. It will be added to the width for standards compliant browsers creating an unknown actual width.
2. Space between the side of the div and the elements within it can be created by placing a left and right margin on those elements as seen in the ".twoColLiqLtHdr #sidebar1 p" rule.
3. Since Explorer calculates widths after the parent element is rendered, you may occasionally run into unexplained bugs with percentage-based columns. If you need more predictable results, you may choose to change to pixel sized columns.
.twoColLiqLtHdr #sidebar1 {
float: left;
width: 22%; /* top and bottom padding create visual space within this div */
background-color: #FFF;
margin-left: 15px;
background-repeat: no-repeat;
border-right-width: medium;
border-right-style: outset;
border-right-color: #060;
/* Tips for mainContent:
1. the space between the mainContent and sidebar1 is created with the left margin on the mainContent div. No matter how much content the sidebar1 div contains, the column space will remain. You can remove this left margin if you want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends.
2. to avoid float drop at a supported minimum 800 x 600 resolution, elements within the mainContent div should be 430px or smaller (this includes images).
3. in the Internet Explorer Conditional Comment below, the zoom property is used to give the mainContent "hasLayout." This avoids several IE-specific bugs.
.twoColLiqLtHdr #mainContent {
margin-top: 0;
margin-bottom: 0;
text-align: left;
float: left;
width: 23%;
margin-left: 20px;
.twoColLiqLtHdr #footer {
background-color: #060;
font-family: Verdana, Geneva, sans-serif;
font-size: x-small;
color: #FFF;
text-align: center;
margin: 0px;
padding-top: 0;
padding-right: 10px;
padding-bottom: 0;
padding-left: 10px;
border-top-width: thin;
border-right-width: thin;
border-bottom-width: thin;
border-left-width: thin;
border-top-color: #090;
border-right-color: #090;
border-bottom-color: #090;
border-left-color: #090;
border-radius: 10px;
.twoColLiqLtHdr #footer p {
margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
padding: 10px 0;
/* Miscellaneous classes for reuse */
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
float: right;
margin-left: 8px;
.fltlft { /* this class can be used to float an element left in your page */
float: left;
margin-right: 8px;
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
.menudiv {
float: left;
width: 50%;
#menudiv2 {
float: left;
width: 60%;
margin-left: 10%;
padding: 10px;
margin-right: 28%;
.fltrtintroduction {
float: right;
width: 66%;
padding-left: 15px;
font-weight: normal;
color: #333333;
#weatherdiv {
float: right;
width: 200px;
.twoColLiqLtHdr #container #header #slideshow {
float: right;
width: 70%;
margin-left: 35px;
a:link {
color: #090;
text-decoration: none;
a:visited {
color: #FC0;
text-decoration: none;
a:hover {
color: #333;
text-decoration: underline;
a:active {
color: #8E9AB0;
text-decoration: none;
#updatetable {
float: left;
width: 60%;
margin-left: 30px;
background-color: #FFF;
#updatetable table tr {
#updatetable table tr td strong {
color: #FFF;
</style>
.lightfont { font-family: Verdana, Geneva, sans-serif;
font-weight: normal;
#logo {
float: left;
width: 24%;
.current.current {
background-color: #090;
.green {
font-weight: bold;
color: #060;
Message was edited by: Pat Krushen

Replace all of the below - from your fax number to the closing </html> tag with the code marked in red
Fax: (306) 274–2110 </span>
</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p><br />
</p>
<p> </p>

<h1> </h1>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
<script type="text/javascript">

</script>
</body>
</html>
Fax: (306) 274–2110 </span>
</p>
</div>
<br style="clear: both;" />
</div>
<script type="text/javascript">

</script>
</body>
</html>

Div layout design

My first website and using CSS.
www.smilesofmichigan.com
I would like the text on the left to always use the same space as the text on on the right.
I was struggling with the format layout for the text on the right (office hours). I started with two simple columns but changed the text on the right to 3 different divs. This is the general layout I would like except I would like the days of the week to be all line up the same. Would you please help me better code this?
My next step will be making a contact page. I believe a form is the best method to use. Any other comments about the site would be appreciated.
Carlos

carloscast1 wrote:
My first website and using CSS.
www.smilesofmichigan.com
I would like the text on the left to always use the same space as the text on on the right.
I was struggling with the format layout for the text on the right (office hours). I started with two simple columns but changed the text on the right to 3 different divs. This is the general layout I would like except I would like the days of the week to be all line up the same. Would you please help me better code this?
My next step will be making a contact page. I believe a form is the best method to use. Any other comments about the site would be appreciated.
Carlos
The text on the left and the text on the right will always be of different lengths, no matter how much you try to find a solution.
You should not try and restrict the length of text to any particular area, just let it consume how much space it requires. Designing for the web is different from desk top publishing. The web is fluid and so should your design be.
Some people use a scrolling area to restrict the text to a specific height but this is an ugly solution as it creates unsightly scrollbars. Really it's better practice to build in flexibility to the design and plan for variations in column height.
What you should do is wrap your 'welcome' <div> and the 3 <divs> on the right in another <div>. Attach a repeating background image (half white on the left and half green on the right) to the 'wrapper' <div>. This will at least visually make both left and right sections look equal in depth when one side or the other contains more text. Key is to add 'overflow: hidden;' to the css of the 'wrapper' <div> this ensures that it enclosed around the other <divs> inside it.
Days of the week look fine to me on Firefox. I'd say that information is 'tabular data' so use a table if it means the info lines up better. There are more complex css methods but its not worth the effort.

Div layout problem

Hi - stuck on what I think should be a fairly basic layout problem:
I have 2 divs, equal widths but varying heights, one floated to the left and one to the right so that they appear next to eachother on the page. The one on the left contains varying amounts of text, the one on the right contains a flash player so never varies.
Where the text for the left div is long, I want it to start off next to the player, but then flow beneath it rather than continuing downwards at the same width as the div. If I remove the width of the left div, so that it reverts to the container width, the player div positions itself below it, so I can't work out how to get the effect.
Can anyone help?

Hi,
hope I understood in the right way: I used (translated from German DW) "modify table" and so I got one more row and two columns in your Main_Content. In one of the new columns I copied the image and beneath I took the text (you now can replace with image and text of your choice), like this:
If that's not a help for your question, please ask me again.
What concerns the width of the pictures, I would format them with PS or a similar program in the same wide.
Hans-G.

DIV Layout - Vertically Centre

Hello, how can i centre my div based layout Vertically and
Horizontally?
Tried a lot but vain.
Please See the Code and Help accordingly.

Horizontal is easy. Vertical is not. In your example, a 100%
width element
won't center anyhow, since there is nothing to center! And a
fixed height
element is BEGGING for trouble - if the text size is changed
larger by the
visitor, you will get an overlapping mess.
<!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=utf-8" />
<title>Welcome to the Wrong Side of the
Web...</title>
<link href="styles.css" rel="stylesheet" type="text/css"
/>
</head>
<body>
<div id="mainCentre">Content for class mainCentre Goes
Here</div>
</body>
</html>
CSS External
========================================
body {
margin: 0px;
#mainCentre {
width: 980px;
margin:0 auto;
background-color: #999;
http://www.apptools.com/examples/tableheight.php
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"manofspirit" <[email protected]> wrote in
message
news:[email protected]...
> Hello, how can i centre my div based layout Vertically
and Horizontally?
> Tried a lot but vain.
> Please See the Code and Help accordingly.
>
>
>
> XHTML PAGE
>
=============================================================
> <!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=utf-8" />
> <title>Welcome to the Wrong Side of the
Web...</title>
> <link href="styles.css" rel="stylesheet"
type="text/css" />
> </head>
> <body>
> <div class="mainCentre">Content for class
mainCentre Goes Here</div>
> </body>
> </html>
>
>
>
>
>
>
>
>
>
>
> CSS External
> ========================================
> body {
> margin-left: 0px;
> margin-top: 0px;
> margin-right: 0px;
> margin-bottom: 0px;
> }
> .mainCentre {
> height: 400px;
> width: 100%;
> background-color: #999;
> }
>

Div Layout positioning - borders?

Hello all,
I've slowly been tinkering away at re-making our company's website in downtime between projects. I'm a graphic designer, still getting used to DW. I've had a lot of assistance from searching topics and asking questions on these forums already. I'm pretty confident once I finish a page I can extend that practice throughout the rest of our site. I seem to be stymied at this point:
I've laid out a header and footer with site navigation and content including a "direct to products" menu. I want to place an image of our office here, as pictured:
I've learned tables are bad, and absolute positioning is bad, so I've been laying out the page using margins around divs to keep them in place. This has worked pleasingly so far in all the browers I've tested it in. You can see the margins indicated in the picture above in DW. However, when I delete the position:absolute attribute, I cannot get this div back into the "content" portion of the page (It keeps wanting to default it in or below the left menu- "homenav."
I'm assuming it's not finding a border to work against? I've put a 1px border around the left menu, but it's not working. What's more, when I do a preview in any browser, the image is gone entirely:
Here is a link to the temporary homepage:
http://www.gellerlighting.com/indextemporary.html
I appreciate any help you can give me. I'm assuming there is a CSS attribute I'm not familiar with that I have to assign to the image div, or the menu div on the left? Thanks
Dan

Amend the css for the 'homenav' <div> to exactly as shown below:
#homenav {
    float: left;
    width:210px;
    height:531px;
    background-image: url(Images/front%20page%20nav%20menu.jpg);
    margin-left: 14px;
    margin-top: 15px;
    background-repeat: no-repeat;
Next select your 'apDiv9' <div> (the one which contains your large image which you want positioned next to the left side navigation). Cut it from the code because it's in the incorrect location. Paste it directly after the closing 'homenav' </div> tag.
You can locate the closing tag for the 'homenav' container by clicking on it's tag name which will be shown along the bottom of Design View in Dreamweaver when you click your mouse anywhere inside of the <div>. Switch to code view and scroll down to the end of the highlighted section and paste back in your 'apDiv9' <div> after the highlighted section.
Then amend the 'apDiv9' css to exactly as shown below:
#apDiv9 {
float: left;
    width:535px;
    height:286px;
    margin-left: 26px;
    margin-top: 16px;
To align elements side by side you need to use the 'float' css attribute(as shown in the css above).
See those %20 characters in the path name to your background image? They are spaces in the name. Don't leave spaces. Use underscores to join up the image name like - Images/front_page_nav_menu.jpg
Best practice is also try not to set height on your <divs>. I see no reason why you should assign a height to the 'homenav' <div> and there is no reason to assign one to the 'apDiv9' <div> either.

DIV Background image not displaying in FF

Hi!
I'm building a floated 3 column DIV layout with a wrapper to center the DIVs. I put a background image in the wrapper to give the appearance of the columns stretching to the bottom of the layout. It displays in IE, but not in FF.
If I give the wrapper a height, the background image shows, but I want the layout to expand as I enter content. My code is below.
I must be missing something. Any tips?
CSS:
#left {
float: left;
width: 200px;
#middle{
float: left;
width: 200px;
#right {
float: left;
width: 200px;
#footer {
background-color: #316262;
float: left;
width: 600px;
clear: both;
#wrapper {
width: 600px;
margin-right: auto;
margin-left: auto;
background-image: url(images/bkg_css_layout.gif);
BODY CODE:
<div id="wrapper">
    <div id="left">Content for "left" Goes Here</div>
    <div id="middle"> Content for"middle" Goes Here </div>
    <div id="right">Content for"right" Goes Here </div>
    <div id="footer">Content for "footer" Goes Here</div>
</div>

Turns out that I couldn't have a float on my footer with clear:both!
FIXED! YEA!

More insight on divs with fluid grids please!

Help me come further up the CS6 fluid grid learning curve, please!
I'm adapting an exiting site to fluid grids. After creating the template for the primary pages, I have two major issues at this point(yeah, only two, SO FAR).
1- I have a vertically expanding menu in the first layout div. For tablets, I want to preserve the left grid column space for the menu, regardless of its length, and all other content would use just the right gid columns. But when the menu happens to be short, the "excess" content floats left under the menu grid columns. How can I force main page content to only occupy the right grid columns, regardless of the length of the menu?
As a side point to the menu, what happens when I try to put this (or the footer) all back in an SSI, as it originally was?
2 - I've seen the note about no support for nested layout divs. Thru trial and error, I'm still trying to figure out just what this means. Pragmatically, what is the greater implication of this? Can format be controlled only on fluid grid layout divs? Can't I have divs inside of a grid layout div to control image palcement around the text for instance? I've had hit=n-miss experience with this so far.
Can anybody point me to a more in-depth discussion on this topic?
Sorry if this ol' dog seems like he's learning div layout all over again. But hey! That IS how it feels!
Thanks for any education, or pointers to such, that you can provide.

Not sure I completely understand what you want. But in this example, I have set nav and LayoutDivs 5, 6, 7 to display:none in smaller devices.
http://alt-web.com/FluidGrid/Fluid2.html
I did this inside a media query within my Content.css file:
/* Special Rules for Mobiles. */
@media only screen and (max-width: 480px) {
   /**hide some divs**/
     nav, #LayoutDiv5, #LayoutDiv6, #LayoutDiv7 { display: none }
     /**show jQuery buttons**/
     #togglenav { display: block }
     #showDivs { display: block }
Then I used a simple jQuery toggle to show/hide divs.
http://jsfiddle.net/NancyO/AP9Hm/
Nancy O.

CSS Layout Nightmare!

OK, I've recently decided to convert from table based layout to div layouts using CSS. I'm pretty proud of the outcome and found it a nice approach to designing. HOWEVER, when i click to edit pages in contribute, it strips out all of the css outline visual aids (like you see in wysiwig editors like Dreamweaver). This is going to be a major problem for my client and wysiwig style editing. Does anybody know how i can get contribute to display this in edit mode and also the best option for my client to select divs in order to copy and paste content. This would be pretty easy in table based layout as contribute lets you select a table and copy and paste it. Ideal way for my client to copy and paste additional news items same format. Any help would be gratefully appreciated. Thanks in advance.

Not.
Walt
"SamDesign.be" <[email protected]> wrote in
message
news:ets71o$ark$[email protected]..
> Hallo Brandon,
> Make de "<div id="divContent">" smaller
> Sheers
> www.SamDesign.be
>
>
> "Brandon" <[email protected]>
a écrit dans le message
> de news: ets5tg$9fo$[email protected]..
>> Working on CSS Layout for the first time (always
have used Tables) . . .
>> can you look at the page below (in initial stages)
and tell me how I can
>> move everything UP? It's driving me crazy. The
picture in the center
>> needs to come up, the main nav buttons need to move
up, and the "boxes"
>> in the left column all need to move up under each
other.
>>
>>
http://www.presentationsdirect.com/2007/
>>
>> --
>> Brandon
>>
>>
>
>

Slice Exports as table instead of Div

Using FW CS5, when I export a sliced image to .htm file, the contents are all in a <table> format instead of as <div> tags, for example;
<table style="display: inline-table;" border="0" cellpadding="0" cellspacing="0" width="1024">
<tr>
<td colspan="3"><img name="background_r1_c1" src="background_r1_c1.png" width="1024" height="26" border="0" alt=""></td>
</tr>
Here is the image I'm trying to slice. All the images are created ok, but no .css file is generated. As you can see there are essentially 4 boxes with some overlapping, do I need to create each box as a separate image?

Linda,
Thanks for the response, however the link you provided is for CS3, not CS5 like I mentioned. Although in your defense the steps outlined are similar to what I read in the Help pages, http://help.adobe.com/en_US/fireworks/cs/using/WSF26E374A-45C0-482b-92E7-8BBA71F98D8D.html
I was able to get the image to export <div> layouts, however they were less than ideal, so I used Visual Web Developer to create the fixed position tags, it actually took less time to do than it did to write this response.

Embed src issue / Div moving

Alright, two problems here. My website is at
http://www.theepicenter.org/pagetemp.htm.
First:
I did a check on my code at validator.w3.org. It keeps
telling me that there are errors on Line 113 with the <embed>
element (this is the "destination finder" header which is made in
flash to keep the font the same), along with several other issues
that will probably resolve themselves when I fix this issue. I
followed W3's FAQ link of fixing flash in xhtml (the "Flash Satay:
Embedding Flash While Supporting Standard" article). This article
is great for movies, but does not work when using flash to make
text boxes. Any help here?
Second:
At the bottom of the page is the footer links and copyright.
In dreamweaver and IE, these will stay in place. But in Firefox and
Netscape, these two lines move down. I've had this issue before and
I fixed it somehow, and I cant remember how I did it. Any help here
would be appreciated too. Thanks!
Kris

Hi Kris,
> First:
> I did a check on my code at validator.w3.org. It keeps
telling me that there
> are errors on Line 113 with the <embed> element
(this is the "destination
> finder" header which is made in flash to keep the font
the same), along with
> several other issues that will probably resolve
themselves when I fix this
> issue. I followed W3's FAQ link of fixing flash in xhtml
(the "Flash Satay:
> Embedding Flash While Supporting Standard" article).
This article is great for
> movies, but does not work when using flash to make text
boxes. Any help here?
I can't help you there...
>
> Second:
> At the bottom of the page is the footer links and
copyright. In dreamweaver
> and IE, these will stay in place. But in Firefox and
Netscape, these two lines
> move down. I've had this issue before and I fixed it
somehow, and I cant
> remember how I did it. Any help here would be
appreciated too. Thanks!
Your real problem is that you use absolutely positioned divs.
Why not get yourself a good 2 col css template (lots of free
and good
stuff out there) and move your design to that instead of the
AP divs
layout you have now. While you're at it you could change your
menus to
styled list menus instead.
I'm sorry if it all sound like bad news... but AP divs just
suck for a
solid layout. (Try to resize your text size and resize your
screen to
800x600).
Very nice design :)
Kim
http://www.geekministry.com

How can I get text to scale to fit div?

I am using a fluid div layout and want the text to scale itself with a maximum and minimum size so that it does not cause the div to expand excessively.
Example - I scale the browser so that the code for the middle size, ipads, kicks in.
I have then sized the text so that it looks right, but when I expand the screen so UNTIL the next media size kicks in, the text appears too small and the box is oversized.
On the other hand I shrink the browser and the text wraps around causing the box div to expand too much causing the photograph to be outsized.
I can not post an example as the client information is now on the site and I don't want to fall foul of group policy by posting links to a live site or 'appear' to advertise it.
Thanks
Terry

Did you put your font-size properties inside your media queries?
/* Special Rules for tablets */
@media only screen and (max-width: 768px) {
body {font-size: 110%}
/* Special Rules for desktops */
@media only screen and (min-width: 769px) and (max-width: 1223px) {
body {font-size: 135%}
Nancy O.

Div Layout

Similar Messages

Maybe you are looking for