Divs being removed from parent div when a float style is applied

Divs being removed from parent div when a float style is applied
Hi All,
I hope someone is able to help me with the below issue.
I apologise if the questions I have been asking lately are really basic, I’m just teaching myself web design.
I really do appreciate the help you guys offer, so a big thank you in advance.
I am confused as to why I am not getting my desired effect for the below code. I am creating a website for someone and have structured the website in the following way:
<body>
<div id="wrap">
<div id="title"></div><!-- end #title -->
<div id="shopping_cart"></div><!-- end #shopping_cart -->
<div id="content_wrap">
<h2 class="header">Header goes here</span></h2>
<div id="nav_bar">
<table>table goes here</table>
</div><!-- end #nav_bar -->
<div id="side_bar">
<h1>text here</h1>
<table>table goes here</table>
</div><!-- end #side_bar -->
<div id="content">
<p>text here</p>
<div id="content_image"></div>
</div><!-- end #content -->
<div id="footer">
<div id="logo"></div>
<div id="flags"></div>
<div id="v_wd"></div>
</div><!-- end #footer -->
</div><!-- end #content_wrap -->
</div><!-- end #wrap -->
</body>
Now I don't know if I am structuring my website the right way this is just the way that makes sense to me. It might not even be the source code that’s the issue and may be the CSS so I have also pasted that in below.
Now the problems I am having are as follows:
I want to have my whole site wrapped in one big div #wrap so I can centre the whole site. Within that div I want all my other divs (which some have divs inside those as well).
To start #title seems to fit inside #wrap without a problem but #shopping_cart gets push outside of #wrap even though it is inside the opening and closing #wrap tag.
My next div #content_wrap, it seems to be inside #wrap however the margin-top I have applied to #content_wrap pushes it down from #title not #shopping_cart even though #content_wrap is below #shopping_cart not #title.
The second problems seem to be with the divs that are or supposed to be inside #content_wrap.
h2 .header seems to fit inside #content_wrap without any problems. Now it gets really confusing, for me anyway. Any div I put below h2 .header which is inside #content_wrap doesn’t seem to actually go inside #content_wrap or #wrap they get pushed below #wrap even though in the source code they are inside the opening and closing div tags.
Also #side_bar and #content together equal 860px which is the width of their surrounding div #content_wrap so they should fit perfectly side by side. This I know ties into a previous discussion I raised in discussion (http://forums.adobe.com/message/4501038#4501038). I have taken Murry’s advice on board from this discussion and tried floating just #side bar to the left and left enough margin for #content to clear, I also tried floating both to the left. Nothing worked.
As I have been writing this I’ve gone through my code, all the above issues only occur if I float a div. If I float a div for some reason it removes that div from any div surrounding it and pushes it below every single div. I don’t know how to position my divs in the exact place I want without floating them but if I float they get moved out of their parent div and therefore aren’t in the position I want them in either.
If you are able to help me resolve this issue it will help me with all future projects. I really do appreciate any help you can give.
Kind Regards
Elliot
CSS
I have marked out where I would float a particular div */style*/ which I know would cancel that style. Therefore the problems I am having are with divs #shopping_cart, #side_bar and #content.
body {
background:url(images/body_bg.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;}
#wrap {
height:auto;
width:895px;
margin:0 auto;}
#title {
Background-image:url(images/title.png);
height:67px;
width:895px;
margin-top:50px;
margin-left:auto;
margin-right:auto;}
#shopping_cart {
background: url(images/shopping_cart.jpg);
height:46px;
width:142px;
margin-top:15px;
margin-right:25px;
/*float:right;*/}
#content_wrap {
background:url(images/content_bg.png) repeat;
border:2px solid #666;
height: auto;
width:862px;
margin-top:15px;
margin-left:auto;
margin-right:auto;}
#nav_bar {
width:809px;
height:59px;
margin-left:26px;}
#side_bar {
height:auto;
width:285px;
margin-top:20px;
border-right:1px solid #666;
/*float:left;*/}
#content {
height:auto;
width:575px;
margin-top:20px;
/*float:left;*/}
#content_image {
background-image:url(images/couple.jpg);
height:184px;
width:271px;
margin:0 auto;}
#footer {
background-color:#0F0;
width:860px;
height:200px;}
#kejo_logo {
background-image:url(images/kejo.png);
height:100px;
width:227px;}
#flags {}
#viscari_wd {}
#copyright {}
#pp_tu {}
.header {
color: #FFF;
font-size:44px;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
margin-left:10px;}
.header_small {
color: #FFF;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 25px;
margin-left:10px;}
#content_wrap #side_bar h1 {
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
color: #4b4a4a;
font-size:20px;
padding-left:15px;}
#content_wrap #content p {
color: #484747;
text-align:center;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:20px;
padding-right:15px;}

Hi guys,
Thanks for your help but still having a few problems;
In design view the code you advised I should add seems to have placed #shopping_cart back into #wrap under #title and above #content_wrap but hasn't when previewed in browser as there is no margin between #content_wrap & #shopping_cart.
#side_bar and #content now seem to sit side by side each other fine in design view and in the browser, however #footer which is in #content_wrap but under #side_bar and #content is behind #side_bar and #content. How do I get #footer to position under #side_bar and #content?
I have added a green background to #footer to make it stand out. I have also added two images one of the site in design view and one previewed in the browser so you can see the difference. I've also pasted the amended code.
Again thanks for your continued help and advice.
<body>
<div id="wrap">
<div id="title"></div><!-- end #title -->
<div id="shopping_cart"></div><!-- end #shopping_cart -->
<div id="content_wrap">
<h2 class="header">Header goes here</span></h2>
<div id="nav_bar">
<table>table goes here</table>
</div><!-- end #nav_bar -->
<div id="side_bar">
<h1>text here</h1>
<table>table goes here</table>
</div><!-- end #side_bar -->
<div id="content">
<p>text here</p>
<div id="content_image"></div>
</div><!-- end #content -->
<div id="footer">
<div id="logo"></div>
<div id="flags"></div>
<div id="v_wd"></div>
</div><!-- end #footer -->
</div><!-- end #content_wrap -->
</div><!-- end #wrap -->
</body>
CSS
body {
background:url(images/body_bg.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;}
#wrap {
width:895px;
margin:0 auto;
overflow:hidden;}
#title {
background:url(images/title.png);
height:67px;
width:895px;
margin-top:50px;
margin-left:auto;
margin-right:auto;}
#shopping_cart {
background: url(images/shopping_cart.jpg);
height:46px;
width:142px;
margin-top:15px;
margin-right:25px;
float:right;}
#content_wrap {
background:url(images/content_bg.png) repeat;
border:2px solid #666;
width:862px;
margin-top:15px;
margin-left:auto;
margin-right:auto;
overflow: hidden;
clear: both;}
#nav_bar {
width:809px;
height:59px;
margin-left:26px;}
#side_bar {
height:auto;
width:285px;
margin-top:20px;
border-right:1px solid #666;
float:left;}
#content {
height:auto;
width:575px;
margin-top:20px;
float:right;}
#content_image {
background-image:url(images/couple.jpg);
height:184px;
width:271px;
margin:0 auto;}
#footer {
background-color:#0F0;
width:860px;
height:200px;}
#kejo_logo {
background-image:url(images/kejo.png);
height:100px;
width:227px;}
#flags {}
#viscari_wd {}
#copyright {}
#pp_tu {}
.header {
color: #FFF;
font-size:44px;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
margin-left:10px;}
.header_small {
color: #FFF;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 25px;
margin-left:10px;}
#content_wrap #side_bar h1 {
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
color: #4b4a4a;
font-size:20px;
padding-left:15px;}
#content_wrap #content p {
color: #484747;
text-align:center;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:20px;
padding-right:15px;}

Similar Messages

  • User being removed from Domain Admins...how to find all servers his account is being used.

    We have a user that is being removed from IT (more like being forcefully demoted) and our owner still finds him valuable in other departments. My challenge is to find all servers that he may be using his account locally on (as a service or added to a local
    admin group). It hasn't happened yet, but we need to be prepared to say we know all the servers his account is on when the owner demotes him.
    I'm hoping someone has an approach to this that doesn't include going through tons of Event Viewer Security logs. We do have System Center Configuration Manager and Operations Manager 2012 w/ SP1, but the guy that is responsible for those is the guy we are removing
    and none of us are aware on how to use the possible tools that those have. If you feel that those would do the trick then please point me to a "how to" and I'll try to learn on the fly. Otherwise I'll take any other suggestions.
    ~Rick

    Hi Rick,
    Based on my research, you can filter events logs based on user name and event ID:
    Advanced XML filtering in the Windows Event Viewer
    http://blogs.technet.com/b/askds/archive/2011/09/26/advanced-xml-filtering-in-the-windows-event-viewer.aspx
    Best Regards,
    Amy

  • Why are artists in music library being removed from alphabetical list once a track has been played? All artist recently played appear before 'A' in my library.

    Why are artists in music library being removed from alphabetical list once a track has been played? All artist recently played appear before 'A' in my library now rendering the search bar on right of screen useless.

    Also, why would my music play at all when I turn iTunes Match off and delete all tracks off the phone? Home sharing also disabled. It is very odd!

  • How can I get a family member back after being removed from family share?

    How can I get a family member back after being removed from family share?

    See [[Replace your Sync information]] but read the cautions carefully.
    * also see [[firefox Sync is not working]]
    It is always a useful precaution to make manual bookmarks backups
    * see [[Backing up and restoring bookmarks]]
    The above article also explains about the autobookmark backups that firefox generates, but be sure to make manual backups as you work, it is very easy to overwrite the wrong set of backups.
    I am not entirely certain what firefox is doing in your case, perhaps the synced Netbook does not have the expected set of bookmarks on it.
    Presumably sync may be uninstalled or disabled like any other add-on
    *see [[Uninstalling add-ons]]

  • Emails are being removed from my inbox after a few weeks

    I have recently notice that old read emails are being removed from my inbox on my iPhone 6. They aren't in my trash, they just disappear.

    I Have tried deleting and then re adding I have also turned off my phone for a while..
    i Don't see a setting that says days to sync

  • Google removed from bookmarks and when selecting safari it does not automatically open to bookmarks as previously did

    google removed from bookmarks and when selecting safari it does not automatically open to bookmarks as previously did

    When Safari launches, tap in the address field (the one on the left) and type "www.google.com" then hit the "Go" button.
    After the page finishes loading, hit the "Action" button (the middle button on the bottom button bar that looks like an arrow coming out of a rectangle) and select "Add to Bookmarks" to add the Google page to your bookmarks.
    After that, you can hit the Bookmarks button (the button that looks like an open book in the bottom button bar) to access the Google bookmark you just created.

  • Is Showtime's Homeland being removed from On Demand?

    All episodes of Homeland On Demand are now listed as available unitl 7/2/2014.  Is Homeland being removed from On Demand?  If so, why?  It's a current running series with a new season to start in the Fall.

    Welcome to the forums.  You're talking to other customers here.
    This answer may help you:
    http://forums.verizon.com/t5/FiOS-TV-Programming/Why-are-we-now-being-charged-to-see-quot-On-Demand-...
    Good Luck
    If a forum member gives an answer you like, give them the Kudos they deserve. If a member gives you the answer to your question, mark the answer as Accepted Solution so others can see the solution to the problem.

  • Data being removed from previous months calendars.

    My
    Data is being removed from previous months calendars

    Go to settings>mail,contacts, and calendars. Make sure the settings for Sync under calendars is set to all events to sync all past events.

  • How to stop emails being removed from inbox. IOS8

    how to stop my emails being removed from inbox. ISO 8.0

    Did you ever find out how to do this?  I am having the same situation.  Thanks

  • HT5252 My facetime removed from my iphone.when i go to contact there is no any facetime shortcut.what can i do now?

    My facetime removed from my iphone,when i go to the contact there is no any facetime shortcut.what can i do now?

    The iPhone can not be legally sold in Iran. It most likely came from a country in the Middle East. If it came from a Middle Eastern country where it is not banned by law, it would be disabled when the phone was taken out of that country to prevent its use in countries where it is not permitted.

  • Q: InDesign Extension could not be removed from file system when it was removed in Extension Manager

    <body>
    <p>All files of an ordinary extension will be removed from file system when this extension is removed in Extension Manager. But InDesign extensions with <tt>"plugin-manager-type"</tt> attribute in mxi file are special. Extension Manager will NOT remove files of this kind of extensions from file system when removing these extensions. Instead, Extension Manager will use other way to tell InDesign not to load these removed extensions when InDesign is launched. If you want to make your InDesign extensions removable, you can just remove <tt>"plugin-manager-type"</tt> attribute from the mxi file when you generate an extension.</p>
    </body>

    Thanks for the help. Yes that addressed the issue.
    On a side note, the tutorial I followed was the one that came with the plugin. Specifically I'm referring to the following file:
    //<eclipse_path>/plugins/com.adobe.cside.html.docs_1.0.0.201307260955/doc/getting_started/ Create_Your_Own_HTML5_Extension_In_5_Minutes.htm
    This is the HTML page for the "Create Your Own HTML5 Extension In 5 Minutes" walkthrough. It makes no mention of changing "PlayerDebugMode". I downloaded the eclipse plugin from the following link:
    http://labs.adobe.com/downloads/extensionbuilder3.html
    Is there a more up to date plugin? Where is the documentation that references changing the settings you mentionned?

  • Default File Permission not being inherited from parent Share folders

    I'm having some trouble with file permissions
    on one of my 10.4.7 file servers (running XServe).
    New folders under Shared folders are not getting their
    permissions from the parent folders.
    Share permission is owner:rw,group:rw,everyone:none
    but a new folder created below that becomes
    owner:r+w,group:r,everyone:r
    and the owner for the new folder is the user who
    created it and not the admin (for the machine).
    I have the default permission to set to inherit permission
    from parent but that doesn't seem to be working.
    I have couple other Xserve 10.4.7 file servers that
    is behaving the way I want, with default permission
    is being inherited from the parent folders, and I've compared them but cannot find any difference between
    the two in their settings.
    Thank you,
    Tadashi

    If you deny read and execute access for any parent folder, you've denied the ability to access its contents. The POSIX execute bit for folders is the switch that determines whether or not the folder's contents can be viewed, listed, or searched. If the contents are not enumerable, then it doesn't matter what their privileges are.
    But be careful. Just not allowing execute for the POSIX owner, POSIX group or POSIX everyone else field may not be sufficient if you're using Effective Permissions. In this case, you'd want to inspect your ACL entries for the parent to ensure that the following controls were not in relevant ACL Allow entries: readextattr, readattr, readsecurity, list, and search. You could also create an ACL Deny entry which denies these five controls for the group or user you want to block out; but don't block the Everyone or Authenticated Users group because ACL Deny rules are evaluated in such a manner that they "subtract from" ACL Allow and POSIX permissions:
    E <=> (P U A)\D
    Effective Permissions (E) are logically equivalent to the union of (U) applicable POSIX permissions (P) and applicable ACL Allow entries (A), taking away (\) applicable ACL Deny entries (D).
    Further, POSIX permissions, P are defined as P <=> (u xor g xor o); they are either the permissions of the owner (u), group (g), or everyone else (o) fields, but not any combination of the two or three.
    --Gerrit

  • When and how does the message context get removed from the message when we use pass thru send port

    Friends,
    i have a doubt regarding message context.
    Assume i have used XMLRecieve pipeline in the receive side to receive the message so that the message context is created. I.e properties are promoted/written.
    now if we use pass thru transmit pipe line at send side, how and when does the message context get removed from the message?? Since pass thru does not have any stages/components, how does the message context removed and sent out a pure message to destination???
     i mean what exactly happens here to remove the context??
    Ravindar

    Thanks for the reply.
    "The Context is created by the Adapter, regardless of any Pipeline or Pipeline Component.  It has nothing to do with PassThrough vs. XmlReceive, although XmlReceive will write Promoted Properties to the existing Context,
    as can any other Component."
    yeah yeah, adapter does create some properties in context. You are right, i am aware of it. I just missed to explain it clearly. what i meant is addition of context properties will not happen if pass thru used. Thanks its clear.
    "No.  The Context already exists on the Message when it comes from the MessageBox and
    is equally available to any Component in any Stage.  The Context that hits the Pipeline is whatever was last Persisted, either by a Receive Port or Orchestration.  It is not created by the XmlAssembler (XmlTransmit)"
    You are right , the context already exists on the message while it leaves the receive port, and once it persists
    to message box the context and message context gets stored in messages in relative tables.
    Now as you said the components get the message from the last persistence, assume i have a send port(with passthru)
    subscriber and a orchestration subsrciber for this message.
    Orchestration gets the message with context right!!
    if the send sendport(with passthru) also gets message along with context, then where is this context removed/demoted
    while sending it out?.  i guess as per SAAkhlaq said,
    here sendport(with passthru) should get a pure message without context as passthru used. 
    or is it that ultimately send adapter removes the context completely?
    or is it something like biztalk run time load the context from database into cache and both orchestration and send port gets pure message, and if needed they use context from cache???
    sorry i may be troubling you, but i am confused. i hope i am not creating any nuisance with this
    post.
    Ravindar

  • Namespace prefix for Security elements being removed from SOAP Header

    Hello, I'm seeing a strange problem when accessing a web service using two different Netbeans projects.
    If I use a Netbeans Java Application, add the Web Client Reference , add the web client code, all works fine and the wsse:Security element looks like this:
    <S:Header>
    <ns4:Security xmlns:ns2="IAMP" xmlns:ns3="urn:realops.com:amp:workflow" xmlns:ns4="http://docs.oasis-open.org/wss/2004/01/oasis-200401-wss-wssecurity-secext-1.0.xsd">
    <ns4:UsernameToken>
    <ns4:Username>admin</ns4:Username>
    <ns4:Password>admin123</ns4:Password>
    </ns4:UsernameToken>
    </ns4:Security>
    However if I do a similar sort of thing but access the web service via a Web Application, the namespace prefix is removed from all child elements wsse:Security like so:
    <S:Header>
    <ns4:Security xmlns:ns2="IAMP" xmlns:ns3="urn:realops.com:amp:workflow" xmlns:ns4="http://docs.oasis-open.org/wss/2004/01/oasis-200401-wss-wssecurity-secext-1.0.xsd">
    <UsernameToken>
    <Username>admin</Username>
    <Password>admin123</Password>
    </UsernameToken>
    </ns4:Security>
    Which causes an authentication exception.
    The question is, why, when the wsdl are exactly the same for both projects , is the namespace prefix removed from the web app?
    Thanks in advance,
    jsz.

    Hello, I'm seeing a strange problem when accessing a web service using two different Netbeans projects.
    If I use a Netbeans Java Application, add the Web Client Reference , add the web client code, all works fine and the wsse:Security element looks like this:
    <S:Header>
    <ns4:Security xmlns:ns2="IAMP" xmlns:ns3="urn:realops.com:amp:workflow" xmlns:ns4="http://docs.oasis-open.org/wss/2004/01/oasis-200401-wss-wssecurity-secext-1.0.xsd">
    <ns4:UsernameToken>
    <ns4:Username>admin</ns4:Username>
    <ns4:Password>admin123</ns4:Password>
    </ns4:UsernameToken>
    </ns4:Security>
    However if I do a similar sort of thing but access the web service via a Web Application, the namespace prefix is removed from all child elements wsse:Security like so:
    <S:Header>
    <ns4:Security xmlns:ns2="IAMP" xmlns:ns3="urn:realops.com:amp:workflow" xmlns:ns4="http://docs.oasis-open.org/wss/2004/01/oasis-200401-wss-wssecurity-secext-1.0.xsd">
    <UsernameToken>
    <Username>admin</Username>
    <Password>admin123</Password>
    </UsernameToken>
    </ns4:Security>
    Which causes an authentication exception.
    The question is, why, when the wsdl are exactly the same for both projects , is the namespace prefix removed from the web app?
    Thanks in advance,
    jsz.

  • Why are random calendar events being deleted from my iphone when I sync it with ical?

    My settings are such that events entered on both devices should push to both devices when I sync. The events being deleted from my iphone are not consistent (ie. older than a certain date), they are random.

    This happens to me INCESSANTLY.  I'm looking at my calendar events one second, and POOF!, the next second all of the events I've entered into the calendar- with the exception of birthdays that are on the actual contact information for a person- are GONE.  My calendar settings are set to sync all events- no timeframe- and always have been.  This happened to me nonstop on my old iPhone 3GS, and I was sure it was the phone causing this issue.  Now, I have my new iPhone 5 in my hands and same ol'   , different equipment.  I have done EVERYTHING I can think of to prevent this from happening or to restore the data- including rebooting, holding home button and on/off at same time, etc.- and NOTHING works to restore the data.  And then, just as magically as the data disappeared, POOF!- the data is back randomly sometime later.  That "later" may be 5 mins, a day, several days.  This is an absurd and EXASPERATING glitch that APPLE NEEDS TO FIX IMMEDIATELY!!!  I'm starting to hate the iPhone and Apple in general when I continuously experience HUGE glitches like this that have a profound impact on what you're trying to accomplish within a feature that you DEPEND on... yet Apple has "never heard of that problem before".  You suck, Apple.  Don't send your problems out into the real world, to users who just gave you $800 for another glitchy piece of equipment that never solves your software issues.

Maybe you are looking for

  • Need to do a re-format, what do i need to keep?

    hi, I need to re-format my desk top computer and re-install my OS. I've got a big i-tunes library and have spent ages organising it and importing artwork so don't want to lose anything. All my music is stored on an external drive so won't be touched

  • SAP. Functions  Connection.logon(0, True) error without any description

    I use SAP note 1028500. It provides VBA Excel macros for xRPM Financial planning data loading. General problem contains in the following lines: Function XRPM_SAP_LOGON(ByRef r3 As Object)   Set r3 = CreateObject("SAP.Functions") r3.Connection.System

  • IOS7 - Weather widget not showing in notification center

    Hello everybody. I have just updated to iOS7 and find there is no weather widget. I have read similar postings, and I can confirm I have Privacy settings ON. Also I refreshed iPhone by turning ON & OFF. Still no luck. Any sugestions?? Thanks!!!

  • Use an application in another language than your system language

    This topic is already spoken about some times here in the forum. Since SL the language triangle is missing when you CMD+I on a application. I am using the system in German, but I love to use FCP for example in English. I really wonder why Apple got r

  • Weird issue with swype

    So I tried using the voice option on the swype keyboard to text, and for some reason it requires me to be connected to the internet.  I am not sure why and I can't seem to find much information on why it does, has anyone else came across this issue?