Place the Divs side by side

OK, so im trying to put 2 different divs side by side on a page. I divided the third page. The first third is 300px, which is reserved for the area links on the left. The other two-thirds is 600px and reserved for the main content area. The problem im having is not able to put the div of links and the div of the main content side by side. Maybe its easier to use an array instead of use of divs, I just want to kno if someone knows how to do with the divs.

Code:

< ! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional / / IN" "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 > ERRATIC MANIFEST DESIGN GROUP < /title >
< meta name = "Keywords" content = "graphics, graphic designer, print design, logos, brochures, business cards, web design, paper for letterhead, envelopes, flash designer, design group, design" / >
< link href = "master.css" rel = "stylesheet" type = "text/css" / > "
< / head >

< body >
< div id = "container" >

< div id = "mainContentarea" >
< p align = "center" class = "headers" > < / p >
< p > < img src = "file:///My Stuff/users/leoneltorres/Desktop/image 6.png" alt = "logo" width = "477" height = "405" class = "logospacing" / > < / p >
< / div >
< / div > < / body >
< / html >

CSS:

@charset "UTF-8";
{body
background-color: #FFFFFF;
background-repeat: no-repeat;
background-position: top center;
margin-top: 10px;
margin-bottom: 10px;
}
#container {}
height: 700px;
Width: 900px;
margin-right: auto;
left margin: auto;
}
{#links}
height: 700px;
Width: 300px;
}
/ * CSS document * /.

{#mainContentarea}
Width: 600px;
height: 700px;
margin left: 300px;
background-color: #FFFFFF;
}
#copyright {}
height: 20px;
Width: 800px;
}
. Headers {}
font family: "Century Gothic".
do-size: 18px;
color: #B70725;
text-align: center;
top of the margin: 90px;
}
{.logospacing}
top of the margin: 30px;
margin left: 60px banner;
}

If it doesn't work... awesome, I did put it in DW.

I will say that your use of the

alignment tags is not the way to go, you must use padding or margins for this. Also, you have all the divs with heights set, once again, something you want to get away from.   You should leave the content determine the height.  I venture a guess that if you remove all of the heights, you will see no difference.

Gary

Tags: Dreamweaver

Similar Questions

  • Cannot place any divs side by side (DW CC 2014)

    I have a mystery of div tag I'm having long enough to understand. It's on side of divs on any page.  Since the upgrade to DW 2014, this problem started to occur. Each page that I do, I keep the CSS on this page, and not a separate CSS file. I insert div, give it a name at the insertion point and select box and give him space to fit the page. I repeat this process for the other div next to him. Worked well until the upgrade. Here are a few screenshots to see what I'm doing... I hope that someone can point out what Miss me in a very systematic process, it is

    Capture1.PNG

    Capture2.PNG

    Capture3.PNG

    This is how the tags would be displayed in the window design on DW CC 2014. Which so far seems the same live on the page.

    Capture4.PNG

    But now they appear on the live Webcam page

    Capture5.PNG

    Here is the CSS and div in code view tags

    < style type = "text/css" >

    {#newsdivleft}

    float: left;

    Width: 860px;

    }

    {#sliderdiv1}

    Width: auto;

    }

    {#divtag1}

    float: left;

    Width: 400 PX;

    }

    {#divtag2}

    float: left;

    Width: 400 PX;

    }

    < / style >

    < div id = "divtag1" > the content of id "divtag1" goes here < / div >

    < div id = "divtag2" > the content of id "divtag2" goes here < / div >

    Click on the "Desktop" size icon

  • What is the best way to place a div at the top a javascript slideshow?

    Here is my live home page which I want to add the div: http://tinyurl.com/d8mro4o

    I want to place a diagonal image from a Red Ribbon with a special offer on this subject in the upper left corner, coming to overlap the photos in the slideshow. You don't know how go about this - as exactly where place the div code into the source code and how to position so it does not move and photos will change to below it.

    Can anyone offer a good solution? Yet undetermined size, but something like this:special-offer-work.jpg

    Please advise... my strong point is design not development.

    Thank you very much

    SG

    I think it's a situation that calls for the position: absolute;

    http://www.w3schools.com/cssref/pr_class_position.asp

    Make your Ribbon and place it in a container div. Perhaps, div.signature or div. Banner

    give the image position: absolute in your css, and one at the top left postiion.

    div. Container img {}

    position: absolute;

    Top: number of pixels;

    left: number of pixels;

    }

    And sweat the container div has position: relative:

    {div. Container}

    position: relative;

    }

    Fingers crossed!

    Martin

  • Display the Server Side includes in top of scrolling Div

    Hello

    In this topic, I will refer to the following containers on my page:

    A: DIV contains the content of the page; This div has overflow, highlight the value.

    B: DIV contains links

    DIV A contains 3 different SSI, each with a different ID. Using the show/hide element, I put it so that when the user clicks on a link in a Div B, the side appropriate server include displays in A DIV, and the other two server-side includes are set to hide.

    The only problem is that when their appropriate links are clicked, ISS 2 and 3 of SSI do not appear in the top of the DIV, but to the position they would be if SSIs all were set to show, then the user must scroll to see SSI and SS 2.

    Know you people anyway to the poster of the SSI at the top of the DIV?

    It occurred to me that instead of use show/hide behavior, I may need to include somehow a SSI only when a DIV B link is clicked, and when a different link B DIV is clicked, that SSI is stripped form on the page and the appropriate SSI are included. Is it still possible?

    Does make sense for you all?

    Thank you

    Mike

    Without seeing your code, it could be how you position these elements on your page.  If you plan on hiding the layers you may set these layers to show at the same place every time by setting the position of A parent DIV and the absolute position of the 3 inner layers with a top and left value set to 0.

  • How can I move the "Open a new tab" button on the left side to the right place

    How can I move the "Open a new tab" button on the left side to the right place

    You must customize it window opens first in order to move around the icons on the toolbar and on / off. Both told us that you can move the icon tab that sits on the tab bar and resembles a + to another bar toolbar or on the left side of the tab bar.

  • The slider side does not move when I put the mouse on it, I need to click below or on the arrow down. Once he left the first place, it moves. Also some applications like changing the city the weather button won't change.

    The slider side does not move when I put the mouse on it, I need to click below or on the arrow down. Once he left the first place, it moves. Also some applications like changing the city the weather button won't change.

    The extension of the Yahoo! toolbar and the extension of Babylon have been reported to cause a problem like that. Disable or uninstall the modules.

       * https://support.mozilla.com/kb/Troubleshooting+extensions+and+themes
    
  • My taskbar is vertical on the right side of the screen. How can I place horizontally at the bottom of the screen?

    Original title: taskbar

    My taskbar is vertical on the right side of the screen. How can I place horizontally at the bottom of the screen?

    Right-click on the taskbar and make sure that lock the taskbar is not checked. Now click on taskbar and keep the left button of the mouse down and drag the mouse to the bottom of the screen - possibly the taskbar should move to the bottom of the screen. Right-click on the taskbar and make sure lock taskbar is checked

  • I can only place icons on the left side of my desk. How can I do so I can place them anywhere.

    Question of office

    I can only place icons on the left side of my desk.  How can I do so I can place them anywhere.  The Startup icons in my taskbar, are also in the middle.  How can I move them to the left?  The crazy kids got a plug of the computer and swiched everything on accident.

    Remember a "good date" when your office was in good condition?
    If so, do a system restore. Choose this "good date" or before this as your restore point.

    http://www.howtogeek.com/HOWTO/Windows-Vista/using-Windows-Vista-system-restore/

  • my toolbar icon and notification of beginning has found its place on the right side. How do I move to the bottom of my screen?

    My husband touched something and my usual position for the start icon and notification bar went to another location.  I want to the bottom of the screen where it has always been.  I tried all the 'tools' that I could find, and the suggestion was to drag.  It does not work.  Help!

    Hello kenpam,

    You can 'unlock' before you drag.

    http://Windows.Microsoft.com/en-us/Windows-Vista/unlock-and-move-the-taskbar

    Unlock and move the taskbar

    Once you unlock the taskbar, it is ready to move to any horizontal or vertical office edge.

    Taskbar

    View all

    To unlock the taskbar

    • Right click on a space empty in the taskbar. If a check mark next to him doesn't lock the taskbar , the taskbar is locked. You can unlock it by clicking lock the taskbar, which removes the check mark.

      Note

      To lock the taskbar into place, right-click an empty space in the taskbar and then click lock the taskbar , so that the box is displayed.

    To move the taskbar

    • Click on an empty space on the taskbar, and then hold down the mouse button, dragging the taskbar to one of the four sides of the office. Once the taskbar where you want, release the mouse button.

  • I have to divs side by side, I want to have the same height

    Hello

    I have divs side by side, I want to have the same height no matter if more content is in div 1 or div 2. I want it to be sensitive so when the window resizes or if the user is on mobile or tablet, it still works. I tried the columns wrong but with the shapes of background / I want that just, it will not work with this technique. I also tried to use the hack 1000px-1000px fill however this cut of the lower part of the div that is unacceptable because the divs have a RADIUS on the corners. He comes to the jquery that I tried and it runs in full screen mode, but when the content inside the div resizing is eliminated. Here is the jquery:

    < script src = "jquery - 1.10.2.min.js" > < / script >

    < script >

    $(document) .ready (function () {}

    {$(window) .resize (function ()}

    resizeDivs();

    });

    var resizeDivs = function() {}

    var highestCol = Math.max ($('.discription').height (), $('.targetinfo').height ());

    $('.discription').height (highestCol);

    $('.targetinfo').height (highestCol);

    var highestCol = Math.max ($('.discription1').height (), $('.targetinfo1').height ());

    $('.discription1').height (highestCol);

    $('.targetinfo1').height (highestCol);

    }

    resizeDivs();

    });

    < /script >

    div help.png

    Please let me know if you have a decent jquery or css solution. So far I have it works in a sensitive environment. Thank you

    If you use fluid grid Layouts, none of these methods do not work.  I think the best you can do is determine the min-height required for desktop computers & tablets.  Mobile devices do not need min-height because these divisions will stack up.

    To illustrate by an example.

    http://ALT-Web.com/FluidGrid/Fluid2.html

    The corresponding CSS code:

    / Special rules for tablets * /.

    @media only screen and (min-width: 481px) {}

    .gridContainer > div {min-height: 255px ;}}

    }

    / * Special rules that apply to workstations * /.

    @media only screen and (min-width: 1025px) {}

    .gridContainer > div {min-height: 325px ;}}

    }

    Nancy O.

  • all my icons that were normally at the bottom of the screen have migrated to the right side and are all bundled together how to place their return to the bott

    I recently bought a HP 15 laptop with 8.1. I use mainly desktop with latest Mozilla. All my icons that is usually found at the bottom of the screen have migrated to the right side of the screen and boots, to the top, I can't do your choice. I tried to customize without result. I am 75 but strive to keep abreast, but it baffled me.

    Sorry, it's a question of support of Windows, the Windows taskbar does not part of Firefox. I do not use Windows 8.1 myself, and I don't know if the process is the same as on my Windows XP - but maybe click and hold and drag this bar down might work like on Windows XP.

    If you do not understand what I said, or it does not work, here is a popular Windows 8 support forum that should be able to help you.
    http://www.eightforums.com/

  • a hard time lining up two divs side by side

    Hey there,

    I changed some coding on my site of British Colombia, and the two div in the main content area is now piled on them instead of right next to eachother. Also, the right column is now completely below the div of the main content on the left side, instead of the view at the top of the right div.

    You can see what it looks like: http://littlefolkies.BusinessCatalyst.com/

    The column upper-left inside the white square with rounded corners is in the right place, but the sentence below the title: "what people are saying about folkies little" is supposed to be next to the div on the left at the same level also showing inside the white square with corners rounded.

    I have a feeling that the two problems are related to the following coding (see code pasted below), but I can't understand what is the specific problem:

    Would appreciate help with this!

    Thank you very much

    I have

    .main {} .sidebar

    display: inline;

    float: left;

    Width: 200px;

    margin: 5px 0;

    }

    .main {} content

    display: inline;

    float: left;

    Width: 710px;

    margin: 0 - 5px;

    }

    {content-columns

    display: inline-block;

    Width: 710px;

    margin: 5px 0;

    margin-bottom: 10px;

    }

    . Content columns content-column {}

    display: inline;

    float: left;

    Width: 300px;

    margin: 5px 0;

    }

    Hello irenaeide,

    Looks like you have a min-width to 200px in this class (line 249):

    {content-columns

    top of the margin: 14px;

    Max-width: 200px;

    padding: 0;

    }

    Remove and the columns will float.

    With regard to the sidebar, I see the css you have shown here applied to the page.

    Hope this helps,

    Chad Smith - BC gurus.

  • How to align 3 divs side-by-side

    Hello.

    I need to break out of the habit of using tables and start using div
    I need to align 3 divs on the layout of the main site. One on the left, right and one in the Middle, I tried to make it work for a while now and have given up. So, how could I go in aligning 3 divs side by side?

    Thanks in advance,

    Perry

    Use floats (CSS). There is not a better way, but here's a starting point.
    First create a container div wrapper & give it a width of say 600 px
    (width: 600px ;))
    Create 3 divs, 200 px wide inside the div wrapper, one after the other.
    Floating each left div (float: left;).
    Create a 4th div, or just a paragraph)

    ) and make clear: left.
    Place it after the 3rd div and within the wrapper DIV. Yet once, it is a
    beginning. Once you get that job you can experiment with the code until you
    understand what is happening.

    If any of these jargon/terms do you say: "huh?" you're in over your head
    and should return to Go. Once back to study CSS and how it interacts with
    HTML before going any further.

    --

    Walt

    "Perry | wrote in message
    News:g39q32$FCJ$1@forums. Macromedia.com...
    > Hello.
    >
    > I need to break out of the habit of using tables and start using div
    > I need to align 3 divs on the layout of the main site. One on the left,
    > on
    > law and the other in the Middle, I tried to make it work for
    > a
    > maintaining and gave up. So, how could I go in aligning 3 divs side
    > by
    > side?
    >
    > Thanks in advance,.
    >
    > Perry
    >

  • My "Send" button has disappeared and my address list on the left side also disappeared. How to recover these items?

    I've never had a problem sending & or receive e-mail before these days. All of a sudden the Send button has disappeared and my address list on the left side also disappeared.
    I find help that suggests the opening of Scripture and then press F9 to retrieve the list of addresses. The list of addresses returned on the left, but did not appear as he used to say. the length of the screen. What is however now it will be satisfactory. The button 'send' is still missing which is frustrating because I was not able to send emails for about a week now.
    Would appreciate advice on how to recover the above.
    Thank you.

    Open a window of writing.
    Do you have the toolbar of Composition with Send-spelling-Attach, etc?
    Otherwise go to the Menu bar and select display-toolbars and turn it back on.
    If you are also missing the bar of menus with top view, press the alt key to display, and then turn on the missing toolbars.

    If you have some of the bar Composition tools but lack just the Send button, click with the right button on the toolbar and select Customize. Find the button send in the dialog box that opens, and he reglisser in place.

  • Yahoo's page cannot be opened properly, the data are clustered on the left side of the screen and do not work

    When opening Firefox, browser my Yahoo homepage is loading properly. It opens but data on the Yahoo page are all the cloged on the left side of the screen and do not see the data nor the icons of work, and I can not access any information or sites, do not respond or work the yahoo page...

    It takes place before, but within hours or the next day, it opens correctly withouth do nothing, but now does not work since yesterday.

    I have window XP

    Hello ajdf9, many site problems can be caused by corrupted cookies or cache. To try to solve these problems, the first step is to clear cookies and cache.
    Note: This will be you temporarily disconnect all sites, you're connected to.
    To clear the cache and cookies to do the following:

    1. Go to Firefox > history > clear recent history or (if no Firefox button is displayed) go to tools > clear recent history.
    2. Under "Time range to clear", select "all".
    3. Now, click the arrow next to details to toggle the active details list.
    4. In the list of details, see the Cache and Cookies and uncheck everything.
    5. Now click the clear now button.

    More information can be found in article to clear your cache, history, and other personal information in Firefox .

    This solve your problems? Please report to us!

    Thank you.

Maybe you are looking for