Add to Google

Centered Div Layout Issues - Float Right item not vertically aligned with text

free web hosting
Open Discussion > CONTRIBUTE > Computers > Programming Languages > HTML, XML etc..

Centered Div Layout Issues - Float Right item not vertically aligned with text

fffanatics
Hey everyone. I am writing an all div layout for my friends website and i just cant seem to get all the fields aligned properly. I can get all my images to be aligned and look great until i put any text on the site. For example, my box that will contain links and such has 3 parts: top, middle and bottom. Each of these have 3 parts: left, middle and right. To program the 3 parts of each row, i use 3 divs which are all floated based on their position. However, as soon as I put text in the middle area, the right image is moved down to a new line. The sample site is located at http://www.fffanatics.trap17.com/bus/profile.html. Please let me know if you have any advice or suggestions on how to fix this. Thanks a ton

Reply

rayzoredge
What really helps out when debugging is putting borders on your DIVs just to help visualize what's going on.

What I'm seeing is that your "background" DIVs are being pushed to the right because your text flow isn't above where you really want it. With that particular DIV, you need to set your width so that it doesn't overflow the DIV, and then use a background for that DIV to match the rest of the image.

Or you could just use that image and position your text using absolute/relative positioning over the image itself.

Reply

jlhaslip
search: clear floats html

Reply



Got an Opinion! Express your Views! (no registration):-
Add your Reply/ Opinion/ Views/ Comments/ Suggestion/ Questions/ Queries etc.
Posts with decent grammar & English will be accepted and please refrain from profanities.
For asking a Question, We recommend you to sign-up (for free) so that you can track the topic easily.

Nature of your Post*: Opinion/ Reply/ Comments
Question/Query
Feedback to us.
       
Name   Email
Title/Question*

(Maximum characters: 10,000)
You have characters left.

Similar Topics

Keywords : centered div layout issues float item vertically aligned text

  1. Word Wrap Text In Div. - (16)
    i use 2 div's for the page layout. One for navigation and one for the contents. html Code:
    Original - html Code: CODE    <div width="10%" style="position:
    absolute; left: 2%;">
    bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb </div> <div
    width="86%" style="position: absolute; left: 14%;"> bbbb </div>
    But now the b's wont stay within their div-element. I want lines that doesnt fit on one line
    within the divto wrap to the next line. How can i do this?...
  2. Any Advice From Experts? - wrapping text around pictures. (3)
  3. Help With Css/html Layout - Horizontal List Problems (5)
    I can't figure out why this horizontal list isnt working. Underneath my banner is supposed to
    be a green gradient bar with a list of links in the center of the page. The links are all the way
    to the left and are really small. The banner is also overlapping the list for some reason. This is
    my current layout(don't worry, I'm not trying to advertise).
    http://www.stormgaming.net/stormcreations/ This is my CSS file
    http://www.stormgaming.net/stormcreations/storm.css Thanks in advance for any help....
  4. Help With Website Layout Correction For All Browsers - Page gets larger on Firefox 2 (4)
    If you go to my site at http://boozkerstweaks.trap17.com and you look at the home page everything
    is fine on all browsers. Problems start to arise very soon however. Here is my list of problems and
    i was wondering if someone could help with just whats wrong. I have done a HTML validator and found
    only 3 errors and all these problems still occured. You might find more now though because i am
    screwing around with the code. Here is the list of browsers and errors: Netscape 8.1: After you
    click on the pulldown menu and click the only tweak avaible at the moment the pag...
  5. Submitting A Form Timeout Issues - (3)
    This is an extremely bizzare issue that I am rapidly running out of ideas on how to tackle. I'm
    not certain HTML programming is the right forum, but then again, I'm not sure what problem
    really is, either. I have two different domains with web material on them, on seperate servers thru
    different companies. One page contains a log in form and is hosted in the first domain. The action
    for the form directs it to a cgi on the second server: Code: CODE <form
    name="LIform" method="POST" action="https://xx.xxx.xx.xxx/cgi-bin/fpcgi...
  6. Xhtml Forms Layout - all within the standars (8)
    We all remember the good old tables right? When we used them to design or beloved websites. But
    nowadays things have change a little bit, strict code format, css, xhtml and no tables. And so
    when it comes finally to the design of a form, instead of having two rows (left row with the label
    and right row with the input tag) and those rows aligned to look nice (left row= right aligned and
    right row=left aligned), how can we keep order with our fancy style sheet? Thanks in advance....
  7. Text Problem - (6)
    Alright well I am having a slight problem with my coding. I made my template and have it up on my
    site but my text I placed in the content box is towards the middle. I would like it at the top but
    I forget how to do that. I know it has to do with some like putting a table inside the table and
    making the height 100% or something. If someone could help me out with the coding I would greatly
    appreciate it. The link to my site is Here and the code used for the content box is this...
    CODE   <td colspan="6" rowspan="3"background="images/cont...
  8. Header < H1> Layout Problem - only in IE? FF is okay. (13)
    The problem is best described as follows. The site in question has a four word Heading as a text
    field, is contained in a div tag, and I tried using br tags to control the display of the words such
    that the layout would follow a set pattern. ie: line 1 = 1word, line 2 = next two words, and line 3
    = the last word. It seems like no matter what I do, Internet Explorer displays the words one line at
    a time, one word on each line. Is this an IE problem? Firefox displays the Heading exactly as I
    want, but IE doesn't even come close. CODE <div><h1>Word...
  9. Select All Text In A Form Field On Click - (1)
    Hi, I have made a script which generates a BBcode when you run it, and displays it in a text field,
    like this: CODE <input type="text" name="bbcode" size="81"
    value="[IMG]<?php echo $url; ?>[/IMG]"> Well, anyway, I
    want something that selects all the text in that form field when you click on it, like it does in
    ImageShack when you upload......
  10. Div Layout Problems - table in div not shrinking (5)
    Hey everyone. I am having an issue on one of my pages where the table inside my middle section of my
    layout will not continue to shrink if the browser window is shrunk. AKA, i get a slider bar on the
    bottom instead of things just overlapping. Below is the code for the page along with my style sheet.
    If you want to see for yourself the problem just go here: Final Fantasy Fanatics - FF7 - Armor .
    Armor.php CODE <?php session_start();    include './../db_connect.php';  
     include './../member_class.php'; include './../news_class.php&...
  11. Glow Text - need help (2)
    Hi i Have One Vbulletin Form and i want Glow Users Name in form How can i do this I search in
    JavaScripts but i can not find it If You find it tell me thanks then Where Past this code on my form
    thanks /blink.gif' border='0' style='vertical-align:middle' alt='blink.gif' /> ...
  12. Code For This Table Layout? - html help needed (6)
    Hey, can anyone help me generate the code needed for a table that would look something like this?
    CODE  ----------------------------------------------------- |                                  
    |---------------- | |                                   |---------------- | |                    
                  |---------------- | |                                   |---------------- | |      
                                |---------------- | |                                  
    |---------------- |  ------------------------------------------------------ Thanks i...
  13. Add Text In Input-field - (5)
    this is a picture of my shoutbox: one problem: the links/code for adding one of the smilies to
    the message-input-field (text: e.g. /laugh.gif' border='0' style='vertical-align:middle'
    alt='laugh.gif' /> , /unsure.gif' border='0' style='vertical-align:middle' alt='unsure.gif' />
    ,...) are missing. Does someone knows how this can be fixed? -the name of the message-input-field
    is "message". thanks in advance! /cool.gif' border='0' style='vertical-align:middle'
    alt='cool.gif' /> ...
  14. Layers With Text Appear - (1)
    When I view this page in a Firefox browser on a Windows operating system, it looks fine, but when I
    view it on a friend's Firefox browser on his Linux operating system, the text layers extend
    their height downward on the page and overlaps the graphics on the bottom of the page. Is there a
    known fix?...
  15. Web Page Layout? - (13)
    I am really struggling right now. I need help!!! Can anyone please tell me what the best
    way to make web page layout is!!!! Please if you say any way, point me to the web
    site where I can learn about it!!! Thanks:)...
  16. How To Make Open & Close Table (layout) - Do You know that ? (1)
    Hi Every one i want to learn and make and use open and close layout and tables on my page i know its
    jsp code but i want one clear jsp code for edit and desgin or tell me how can i do that ? for
    sample see this site you can close tables left and right of the site by one down and up arrow
    www.ashiyane.com Thx /cool.gif' border='0' style='vertical-align:middle' alt='cool.gif' /> ...



Looking for centered, div, layout, issues, float, item, vertically, aligned, text

*RANDOM STUFF*





*SIMILAR VIDEOS*
Searching Video's for centered, div, layout, issues, float, item, vertically, aligned, text

*MORE FROM TRAP17.COM*
advertisement



Centered Div Layout Issues - Float Right item not vertically aligned with text



 

 

 

 

ADD REPLY / Got an Opinion! a humble request :-) RAPID SEARCH! Free Hosting [X]
Express your Opinions, Thoughts or Contribute your information that might help someone here.
Ask your Doubts & Queries to get answers.. "Together, We enlight each other!"
Register FREE for AD-FREE forum, Create your own topics, Ask Questions, track topics, setup subscriptions & notifications and Get a Free Website w/ Email and FTP.
500MB Space *No Ads*, CPanel, FTP, PHP, MySQL, EMails - 100% FREE