Floating text with div alignment problems

I have trouble with the lay-out. I'm afraid that this is a common problem (just an amateur) but could not find the solution.

I have a div container and inside this a content-div div and a floating sidebar div (floating on the right). I would like the text of the content div is at the same level as the bar side-divtext. So... "Spaanse lovely" the text is horizontal at the same level as the text 'Op naar... search. ».

As it is now, everything looks all right on my laptop and Internet Explorer. But if I look at another PC (also IE) the text "Spaanse lovely" appears much lower.

The site of East www.Spaanse-pyreneeen.nl and here's the css file.

I hope someone can help me.

Katinka.

{body
text-align: center;
margin: 0px;
padding: 0px;
do-family: Verdana, Geneva, without serif.
do-size: 12px;
background-color: #D7D0B4;
}
#footer {}
do-size: 9px;
background-color: #EEE;
text-align: right;
padding: 0px;
Clear: both;
Width: 900px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
left margin: auto;
}
#sidebar {}
background-color: #EEE;
text-align: justify;
float: right;
Width: 150px;
padding-top: 15px;
padding-right: 14px;
padding-bottom: 0px;
padding-left: 15px;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #55552B;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
left margin: 0px;
}
{#navigatie}
background-color: #D7D0B4;
margin: 0px;
padding: 0px;
Width: 900px;
do-family: Verdana, Geneva, without serif.
do-size: 12px;
color: #663;
}

{#fotos}
background-color: #EEE;
text-align: center;
margin: 0px;
padding: 0px;
Width: 900px;
height: 200px;
}
{image
padding: 0px;
border-top-style: none;
border-right-style: none;

border-bottom-style: none;
border-left-style: none;
}

{.floatleft}
float: left;
}
{.floatright}
float: right;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
}

#container {}
padding: 0px;
Width: 900px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
left margin: auto;
Clear: none;
background-color: #EEE;
}
#header {}
background-color: #EEE;
height: auto;
Width: 900px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
left margin: auto;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
#content {}
background-color: #EEE;
margin-top: 0px;
right margin: 180px;
margin-bottom: 0px;
left margin: 0px;
padding-top: 40px;
padding-right: 50px;
padding-bottom: 0px;
padding-left: 50px;
text-align: justify;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #55552B;
}
H1 {}
font size: 20px;
margin-top: 0px;
}
H2 {}
do-size: 14px;
margin-bottom: 0px;
}
H3 {}
do-size: 14px;
margin-bottom: 0px;
}
body, td, th {}
color: #55552B;
}
a: link {}
color: #630;
}
a: visited {}
color: #630;
}
a: active {}
color: #630;
}

katinka2010 wrote:

Thank you for your response.

I did the changes exactly as you said and it looks better on the computer, but there is always a difference.

However, on my laptop it is' much better n. The text of 'De Spaanse lovely' is good on the menu bar.

Do you have any suggestions?

Katinka.

Edit the css "container" as below. Some of the elements of the Spry naviagtion are floating, who will lead them in the normal html stream, so you have to 'clear' These floats, so clear: both; (below) instead of clear: none;

#container {}
Width: 900px;
margin-right: auto;
left margin: auto;
Clear: both;
background-color: #EEE;
   
}

Then remove the "break" in your code below:



     

Of Spaanse lovely

Tags: Dreamweaver

Similar Questions

  • Div align problem

    Hello.

    Somone can see this code?
    Most likely, I used the tags div and span incorrectly.
    You will need to copy in Dreamweaver to see what it looks like and what I need.
    I try to get the "DOWNLOAD | PREVIEW text' to be aligned at the bottom of this area.

    < div style = "vertical-align: top of the text;" height: 100px; "> < img src =" "alt ="model 1"width ="150"height ="100"style =" width: 150px; "" float: left; "/ > < span style =" float: left; " Width: 300px; height: 100px; vertical-align: bottom; margin-left: 10px; ">
    < div style = "float: left;" vertical-align: top of the text; float: left; ' > This hg is a new salanon model as dasd as dasd as dasd as dasd as dasd as dasd as dasd as dasd as dasd < / div >
    < div style = "vertical-align: text-bottom;" float: left; Width: 200px; "> [DOWNLOAD] [PREVIEW] < / div >
    </span >
    < / div >

    Any ideas?
    Thank you.

    -Adrian.

    I misread your message. I see that you wanted only uppercase text in the lower part.
    There are always problems with your new code. You did pretty good but you
    can't float a div absolute positioning You don't need the
    Display: inline. Try this code...

    http://adrianTNT.com/products/templates/1/thumb.gif ".
    Width = "150" height = "100" / >

    This hg is a new salanon model as dasd as dasd as dasd as as
    DASD as dasd as
    [DOWNLOAD] [OVERVIEW]

    --
    Kind regards
    .. Trent Pastrana
    www.fourlevel.com

    "adrianTNT" wrote in message
    News:ebrlhb$k5b$1@forums. Macromedia.com...
    > Thank you. The exact code didn't work, but I managed to do something
    > absolute
    > position: absolute as you have written in this code.
    >
    > The code that worked:
    >
    "> http://adriantnt.com/products/templates/1/thumb.gif '.
    > width = "150" height = "100" / >
    >
    > This hg is a new model as dasd as dasd as dasd as salanon as
    > dasd
    > also as dasd as
    > [DOWNLOAD] [OVERVIEW]
    >

    >
    > Thanks again for your time.
    > Bye bye.
    >

  • Firefox 33.0.1 - rendering of the text with the acceleration problems hardware OR not.

    Hello, I have problems with Firefox render wrong text and other graphical problems, regardless of hardware acceleration.

    With hardware acceleration on, I have problems with "ghost text cursors" appearing in various parts of the interface, more particularly in the tabs next to the X button on each tab, but also the other sections of the interface as well. The text is returned to the appropriate thickness, but in some cases flashes back of fixes too thin (see below / stop) in sync with the speed of blinking text cursors.

    With disabled hardware acceleration, I have problems where the text in menus and Web pages is made too thin, making it extremely difficult to see. Issues and artifacts flashing disappeared, however.

    I use a NVIDIA GeForce GTX 750 Ti with the latest version of the driver (344,48).

    This only started happening around 33.0 version, maybe an earlier version (not 100% sure). I really want to look for and choose between what a crappy experience I'd rather have. I just want to how he used to, nice and clean and readable text. What can try to remedy?

    Try disabling OMTC and leave hardware acceleration in active Firefox.

    • layers.offmainthreadcomposition.Enabled = false

    You can open the topic: config page via the address bar.
    You can accept the warning and click on "I'll be careful" to continue.

  • Problem of browser with DIV aligning, different versions of IE

    Hello

    I just tested my page in different versions of IE and I'm a little appalled!

    In IE 8 all works fine.

    IE 5.5 to 7 slideshow DIV and content div three little move and not the line upward...

    Please feel free to take a look and all tips are welcome.

    http://matthamiltonracing.com/indextwo/indextwo.html

    Thank you very much

    Mark

    Markcronin123 wrote:

    Hello

    Thank you for the reply, please confirm that I put the "inline", on the block tab display?

    I tried this but my inmage background disappears? strange?

    Thank you very much

    Mark

    I opened just the css stylesheet and scroll to the bottom of the list. Wherever you find a margin has been applied to a container in the same sense that it has been issued just add:-display: inline; the css styles.

    Add display: inline; Make NOT the background image disappear properly applied.

  • The DIV alignment problems

    Problems of div... I need to get more experience in working with the Divs because that always seems to run into trouble...

    I use a magic project7 accordion plugin for my navigation. In one of the panels is a menu drop-down list of search form. When this opens a Panel, the main contained table moves slightly to the right. All other panels are working fine.

    I'm sure it's something to do with the Div or the list/menu form. I tried to remove the menu, leaving only a single link and the Panel was very good. I tried several changes to CSS style without result. I did a lot of trial and error with padding, margins, and width parameters %.

    The page can be found at: http://www.dvdflashbacks.com/williamsburghealth/index.php

    I've also attached the code here:

    well I finally answered my own question with this one. I got the CSS using a % instead of px on this one. Once I changed the size of everything beautiful in an exact px, IE7 poster form!

  • elements of apex multi read only with the alignment problem!

    I have multi(radio,select,date,text,number) apex articles are collapse column when change the mode read-only region/Articles!

    demo page: https://apex.oracle.com/pls/apex/f?p=13116:12:8218330014916:

    Theme 21

    The region of items should show the following without entry box! and sets of columns and lines.

    read only.PNG

    Ramani_vadakadu wrote:

    elements of the apex are collapse column, the values of the elements when change the mode read-only region/Articles!

    demo page: https://apex.oracle.com/pls/apex/f?p=13116:12:8218330014916:

    Theme 21

    The region of items should show the following without entry box! and sets of columns and lines.

    Use the following style sheet in the page CSS Inline property:

    .formlayout span.display_only {
      display: inline-block;
      width: 20em; /* Adjust dimension as required */
    }
    

    (Please stop using free and no grammatical exclamation points in your messages. "This is not a comic).

  • With a withdrawal of the chip and text alignment problem

    I need to right align a text with a ball (numbered) AND to have a left indent.

    The text block is pointed out to the center of the double-page (so I can't use a smaller text without any left indent block).

    Withdrawal left avoid that double the text to the left of the flow to the center of the page.

    However, it seems that bullets don't like that much of withdrawals of paragraph:

    GfTpC.png

    So, I tried to use a transparent block with a text wrapping.

    The balls follow the text wrapping, but are aligned to the left:

    3tWiu.png

    How could I solve this problem?

    Use a net of paragraph that may extend outside the text frame. So you can make the text smaller block.

  • DWT with Safari 4 alignment problem

    Hi, it seems that since I placed a spry menu in models of the web site that I'm getting, it seems to face a problem of alignment with Safari 4, where the content of the current comic strip page is outside the div container and next to the layout of the site.  This question doesn't seem to appear with other browsers, only Safari as it seem to appear in mode live view thus (I had thought originally it may have been a glitch)

    http://tangentartists.com/leviathans.html

    The thing is I had used the model for other pages as a basis, we used this model before the spry and there is no problem.  After I added the spry this questions do not have other models that have been made to this site, only the comic model has this problem.  Here is the code for the comic.dwt model.

    < ! 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 "> <!-InstanceBegin template="/Templates/template.dwt ' codeOutsideHTMLIsLocked = 'false'->
    < head >
    <!-InstanceBeginEditable name = "doctitle"-->
    < title > < /title > tangent artists
    "" < link rel = "shortcut icon" href = "... / favicon.ico ' / >
    <! - InstanceEndEditable - >
    < meta http-equiv = "Content-Type" content = text/html"; charset = utf-8 "/ >"
    < style type = "text/css" >
    <!--
    {.bottom_footer}
    color: #fff;
    text-align: right;
    Word-spacing: normal;
    do-family: Verdana, Arial, Helvetica, without serif.
    font size: xx-small;
    make-style: normal;
    make-weight: normal;
    text-transform: capitalize;
    }
    ->
    < / style >
    "" < link href = "... / ta_web2.css" rel = "stylesheet" type = "text/css" / >
    <!-InstanceBeginEditable name = "head"->
    <!-TemplateBeginEditable name = "head"->
    <! - TemplateEndEditable - >
    <! - InstanceEndEditable - >
    "" < script src = "... / SpryAssets/SpryMenuBar.js" type = "text/javascript" > < / script >
    "" < link href = "... / SpryAssets/SpryMenuBarHorizontal.css" rel = "stylesheet" type = "text/css" / >
    <!-InstanceParam name = "There" type = "boolean" value = "false"->
    < / head >
    < body leftmargin = "0" topmargin = "0" marginheight = "0" marginWidth = "0" >
    < div id = "container" style = "position: inherit;" Width: 800px; margin: 0 auto; ">
    "" < div id = "banner" > < img src = "... / images/TA_header.jpg" width = "800" height = "187" border = "0" align = "left" / >
    < ul id = "MenuBar1" class = "MenuBarHorizontal" style = "background-color: #000" >
    < style li = "margin: 0px;" right margin: 1px; "" > < a href = "... / index.html" > home < /a > < /li > "
    "< li > < a href ="... / aboutus.html "> on < /a > < /li >"
    < li > < a class = "MenuBarItemSubmenu" href = "#" > < /a > Comics
    < ul >
    "< li > < a href ="... / leviathans.html "> Knights of leviathans < /a > < /li >"
    "< li > < a href ="... / donutsforlooking.html "> Donuts for Looking < /a > < /li >"
    "< li > < a href ="... / skeletoncrew.html "> Skeleton Crew < /a > < /li >"
    < /ul >
    < /li >
    "< li > < a href ="... / gallery.html "> Gallery < /a > < /li >"
    "< li > < a href ="... / downloads.html "> download < /a > < /li >"
    " < li > < a href =" http://www.CafePress.com/tangentartists "class ="MenuBarItemSubmenu"target ="_blank"> < /a > stores "
    < ul >
    " < li > < a href =" http://www.CafePress.com/tangentartists "target ="_blank"> tangent Tidbits < /a > < /li > "
    " < li > < a href =" http://www.CafePress.com/koleviathan "target ="_blank"> Knights of leviathans < /a > < /li > "
    " < li > < a href =" http://www.CafePress.com/donutsforlook "> donuts seeks < /a > < /li > .
    " < li > < a href =" http://www.CafePress.com/taskeletoncrew "> skeleton Crew < /a > < /li > .
    < /ul >
    < /li >
    " < li > < a href =" http://tangentartists.forummotion.com/ "target ="_blank"> Forums < /a > < /li > "
    "" < li > < a href = "... / links.html" > links < /a > < /li >
    < style li = "margin: 0px;" left margin: 1px; Width: 96px; "" "> < a href ="... / contactus.html "> contact us < /a > < /li >
    < /ul >
    < / div >
    < div id = "content" >
    <!-InstanceBeginEditable name = "content_box"--> < table width = "200" border = "0" align = "center" cellpadding = "5" cellspacing = "10" >
    < b >
    "" < td > < img src = "... / images/Leviathans_logo.jpg" width = "597" height = "71" / > < table >
    < /tr >
    < b >
    "" "" "< td > < div align ="center"class ="style1"> < img src ="... / images/first.jpg "width ="108"height ="29"/ > < img src ="... / images/back.jpg "width ="83"height ="29"/ > < img src =".. "" / images/next.jpg "width ="83"height ="29"/ > < img src =".. ' / images/last.jpg "width ="108"height ="29"/ > < / div > < table >
    < /tr >
    < b >
    < td > < table >
    < /tr >
    < b >
    "" "" "< td > < div align ="center"> < span class ="style1"> < img src ="... / images/first.jpg "width ="108"height ="29"/ > < img src ="... / images/back.jpg "width ="83"height ="29"/ > < img src =".. "" / images/next.jpg "width ="83"height ="29"/ > < img src =".. ' / images/last.jpg "width ="108"height ="29"/ > < / span > < / div > < table >
    < /tr >
    < b >
    "" < td = '35' height > < div align = "center" > < img src = "... / images/comicarchives.jpg" width = "108" height = "16" border = "0" / > < / div > < table >
    < /tr >
    < / table > <! - InstanceEndEditable - >
    < script type = "text/javascript" > <!--
    google_ad_client = "pub-1882609231108555";
    / * 728 x 90, created on 7/11/09 * /.
    google_ad_slot = "1820206808";
    google_ad_width = 728;
    google_ad_height = 90;
    ->
    < /script >
    < script type = "text/javascript".
    src = » http://pagead2.googlesyndication.com/pagead/show_ads.js ">
    < /script > < / div >
    < div id = "footer" >
    < h1 class = "bottom_footer" > artists tangent & copy; 2006-2009 < / h1 >
    < / div >
    < / div >
    < script type = "text/javascript" >
    <!--
    var MenuBar1 = new Spry.Widget.MenuBar ("MenuBar1", {imgDown: "..."}) "" / SpryAssets/SpryMenuBarDownHover.gif ', imgRight: ".. ({"/ SpryAssets/SpryMenuBarRightHover.gif"});
    ->
    < /script >
    < / body >
    <! - InstanceEnd - > < / html >

    Just an estimate, but in your CSS for the div #content, helps if you add:

    #content {clear: both ;}}

    Also, probably unrelated, but your table just inside the #content div has a size of 200px in the HTML code and the content is obviously larger.

  • Need help with div floating and clear property

    Link to page

    Link to the CSS file

    I have the site currently configured as a site of 3 columns and everything works fine.  I need to do a few pages as a 2 column page with the left column with only several "leftcolumn" div piled on each other so that there are several sections of box rounded in the left column.

    I have the leftcolumn div is floated left with a clear left for the left div column to stack on each other.

    The by rightcolumn is floating right.

    How can I get my right column to align with the top of the first leftcolumn div?

    It is not always necessary to float each column.  A float is usually enough for a 2-column layout.

    Where you have this:

    {#rightcolumn}
    Width: 620px;
    float: right;
    color: #FFFFFF;
    do-family: Verdana, Arial, Helvetica, without serif.
    color: #FFFFFF;
    do-family: Verdana, Arial, Helvetica, without serif.
    padding: 10px;
    border: 3px solid #5f605f;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    -Opera-border-radius: 20px;
    -khtml-border-radius: 20px;
    border-radius: 20px;
    background-color: #858586;
    do-size: 12px;
    margin: 10px;
    }

    Change it as follows:

    {#rightcolumn}

    / * REMOVE IT * /.

    Width: 620px; 
    float: right;
    color: #FFFFFF;
    do-family: Verdana, Arial, Helvetica, without serif.

    color: #FFFFFF;

    do-family: Verdana, Arial, Helvetica, without serif.
    padding: 10px;
    border: 3px solid #5f605f;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    -Opera-border-radius: 20px;
    -khtml-border-radius: 20px;
    border-radius: 20px;
    background-color: #858586;
    do-size: 12px;

    / * REMOVE THIS * /.

    margin: 10px;

    / * ADD THIS * /.

    margin left: 350px;  / * adjust as needed * /.
    }

    Nancy O.
    ALT-Web Design & Publishing
    Web | Graphics | Print | Media specialists
    http://ALT-Web.com/
    http://Twitter.com/ALTWEB

    Post edited by: Nancy O.
    Scratched do not work in the forum.  I edited the code for most sense.

  • Alignment of memory with CVI 2013 problem

    Hello

    I just installed 2013 CVI from CVI 2010 and opening my old projects, I'm in trouble with the alignment of the memory.

    Not in all the projects that I opened, I get the problem, and I'm quite confused about this.

    I used to keep in line with the limits of 1 byte of memory and I have thousands and thousands of saved file with this method.

    I have prepared a very simple project (attached to this post) to illustrate the problem, consider that the result would have been with CVI 2010 'occupation of 5 bytes.

    Pragma pack() change his behavior?

    Y at - it a flag set in the Options menu or elsewhere?

    If anyone has a suggestion please help me.

    Thank you

    Sergio

    Hello

    I found the problem, there's a semicolon that follows the directive of preprocessor #pragma pack (1), and it causes the pragma is ignored.

    Remove the semicolon, everything works fine.

    Sorry!

    Sergio

  • a problem with the alignment of site on the Tablet and phone version.

    I have a problem with the alignment of my site on the Tablet and phone Version of my site.

    If you open the Tariffuehrer.com site on the tablet or smartphone, you can see, the page is aligned to the left in the browser. I want the page to Center. I did find an option for it in the backend of muse.

    I'd be happy if someone can help me.

    Hi Michael,

    I can't view your site as it showed error 403,

    Can you please recheck the url of your site and repost it so that I can check on this subject.

    Kind regards

    _Ankush

  • problems of text with illustrator cc (mac)

    Hello world

    I've been using illustrator since not so long and I'm having a few problems with my project and I hope you can help.

    I typed a text with ostrich without Inline and I wanted to paint the Interior of the letters parts in white so I created outlines and then I took out the compound path.

    as soon as I started to paint letters, those that have been closed (such as the letter R) wouldn't let my unpaint the formula to the letter.

    Does anyone knows how to fix this (I think it's pretty easy, but can not do the job)

    Thank you!Screen Shot 2015-05-20 at 13.22.18.jpg

    Do not remove the hole. To actually do a compound path.

    Using the white arrow direct Selection tool select the hole and the R and then go to object > compound path > make.

    If the result is weird, cancel, wear the hold at the front (in front of the (R), and use the object > compound path > again.

  • Images - facing a problem with the alignment of captivate

    Hello world

    I am using captivate to create e-learning courses for my client. The course was in PPT and slides have been imported into captivate. The process was smooth until the customer asked me to change the size of the canvas. The course includes images as well as on the slides.

    The problem comes here

    1. I can chamge the size of the canvas of 1024 * 768 and 1280 * 800 in the same file? If so, how?

    2. I tried another way of doing this thing. I created the canvas with 1280 * 800 itself. Then, I went back to the old captivate file and copied all the slides and paste it into the new file. But the blades with images have problem (eg. alignment issues produced.). Is it possible to modify these images here himself in captivate so that I can move with arrow keys and mouse to solve the problems of alignment?

    Thank you and best regards

    Vikas

    Please, this is a forum for users and expect to get an answer right away? Myself and other users to be able to spend more than one hour a day, trying to answer questions, but we do that in addition to our normal work and all this for free.

    You can resize a project with changes, the project of the scale. You have the choice of high end everything, which will always lead to a loss of quality. Best result is given when you can keep the aspect ratio, but this isn't the case for you, since you spend report 4/3 16/10 rather unusual.

    Problem is, imported, Powerpoint slides are converted into film slides. This means that you don't have the items separately in Captivate and will not be able to reallocate the as you request your second question.

    Even resizing in Powerpoint will give you a lot of headaches, because of this change the aspect ratio. And that would be the way to go, if you use Captivate as a converter for PPT, that is not the best use of a creative tool at all. A plug-in for PPT is much better suited for this cause (Adobe Presenter, Adobe articulate, iSpring).

    Is to embed the slides present in a Knockout Master slide a possible workaround?

    http://blog.lilybiri.com/create-and-use-a-knockout-master-slide

    Lilybiri

  • Alignment of the text with flast.text.engine

    Hello

    I look at the example HelloWorld for TVE as part of layout of the text and I want to create a single block of text that is aligned to the right. How can I do this with the FTE NOT Text Layout Framework classes?

    Thank you

    Glen

    What is
    textLine.x = totalWidth - textLine.textWidth

  • &amp; lt; div &amp; gt; problem with Firefox and Google Maps

    Hello world

    I have a Google map with no width set so it will fill the < div >
    However, it was expanded to cover another < div >, which contains the caption beside
    It is in Firefox. Displays perfectly in Internet Explorer.

    Here's my card:
    Map with divs


    The div for the legend and map are the following:

    I also using tables instead recreated)
    ( Card with Tables) However, it is not correctly displayed in Internet Explorer: it has plenty of space added between the search box and the card?

    Can someone please help with suggestions to to display correctly in IE and FF?
    Thanks in advance

    The fixed!
    When I put the

    s nested in a table, it does not display properly in IE - left a lot of white space. However when I set the width of the table in '99% ' rather than '100% ' it displays correctly. Strange but it works.

    See you soon
    Brett

Maybe you are looking for