I don't understand why the fiddle at http://jsfiddle.net/zHH4D/
doesn't show the "to the right" outside the red area and to the right,
but inside the red block?!
I can put the div outside the parent div and this kind of works but it just doesn't make sense to me.
Where am i thinking wrong?
You have a typo:
<div style="width:340px;float:left;background-color:#f00;">
<div>above ok</<div> <!-- TYPO -->
<div>under ok</div>
</div>
This causes the browser to interpret your markup as best as it can, which results in this (copied from Chrome inspector):
<div style="width:340px;float:left;background-color:#f00;">
<div>above ok<!--<div-->
<div>under ok</div>
</div>
<div style="float:left;">
to the right?
</div>
</div>
Here's a fixed version:
<div style="width:340px;float:left;background-color:#f00;">
<div>above ok</div> <!-- Notice the closing div tag -->
<div>under ok</div>
</div>
Related
I have a very wide element, #widelement inside a bootstrap row col. I would like to enclose it on a div, .mywrapper, with a horizontal scroll bar in order to keep page layout.
Someone can explain to me what style I should add to .mywrapper to avoid that #widelement overflows the bootstrap col?
In this sample, the wide element has a 5000px width, but, this is not a fixed number, can be bigger or smaller, also smaller than col size.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<div class="container">
<div class="row">
<!-- first col -->
<div class="col-4" style="background-color:yellow">
<p class="text-end">
This text is ok, should be visible by default.
</p>
</div>
<!-- second col -->
<div class="col-4">
<div class="mywrapper" style="background-color:red;">
<div id="widelement" style="width:5000px;">
<p class="text-end">
This text is inside a 5000px div.
I would like the div .mywrapper has a horizontal scrollbar.
I mean, just a scrollbar for the div, not for the whole page.
The div should be inside de col-6.
On scrolling right, this text should become visible.
</p>
</div>
</div>
</div>
<!-- third and last col -->
<div class="col-4" style="background-color:yellow">
<p class="">
My left div should have a scroll bar.
</p>
</div>
</div>
</div>
What I tried unsuccessfully:
.mywrapper {
overflow-x: scroll;
}
Testing your solution I ended up with this snippet:
.mywrapper {
overflow-x: scroll;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<div class="container">
<div class="row">
<!-- first col -->
<div class="col-4" style="background-color:yellow">
<p class="text-end">
This text is ok, should be visible by default.
</p>
</div>
<!-- second col -->
<div class="col-4">
<div class="mywrapper" style="background-color:red;">
<div id="widelement" style="width:5000px;">
<p class="text-end">
This text is inside a 5000px div.
I would like the div .mywrapper has a horizontal scrollbar.
I mean, just a scrollbar for the div, not for the whole page.
The div should be inside de col-6.
On scrolling right, this text should become visible.
</p>
</div>
</div>
</div>
<!-- third and last col -->
<div class="col-4" style="background-color:yellow">
<p class="">
My left div should have a scroll bar.
</p>
</div>
</div>
</div>
It turns out that the very code you have suggested works. So, something prevents it from working at your end, which could be one or more of the following:
client-side cache (your browser temporarily stores your css and js files in order not to have to download them each time you load a page and it's possible that when you have tested, the cached old version of your CSS was loaded by a locally cached file by your browser instead of downloading it from the server), Ctrl+F5 (or even clear browser cache or even testing in a freshly opened incognito window) sorts this out
server-side cache (CloudFlare or some other server-side software generates static files periodically and sends those out to the browser upon page load rather than generating the response upon each request), in which case, you need to clear the server-side cache while you are testing
you forgot to save the code when you have edited it
you forgot to deploy it on the server
the wrong file was edited
the right file was edited, but it was wrongly not included into the HTML
some higher prio CSS rule prevented the overflow-x rule from being applied (see https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity)
So, your idea was correct, but something prevented it from providing the benefits you have expected. The issue therefore is something technical at your project and you will need to troubleshoot the potential issues listed above. If it still does not work at your end, then you will need to edit your question with more information and let the answerer(s), including myself know about the additional information.
i don't understand, why my floating doesn't work. There is the site - and as you can see, the floating doesn't want to work. What is the problem with it?
It works. It's floating right in the context of it's parent which is <div id="content">.
You need to put it (in HTML code) before the <div class="side_bar"> which is floating left, like this:
<div id="content">
<div class="news_block">
the floating to the right side - don't want to work
</div>
<div class="side_bar">
sidebar
</div>
</div>
OR, if for example your scripts need that, you want to wrap everything you want on the left side to the side_bar DIV, which is the only one which has the CSS to float on the left. Maybe you haven't noticed it, but you have:
<div id="content">
<div class="side_bar"> <!-- floats left -->
sidebar
</div>
<div> facebook thing </div> <!-- doesn't float -->
<div> ads </div> <!-- doesn't float -->
<div> whatever </div> <!-- doesn't float -->
<div class="news_block"> <!-- floats right-->
the floating to the right side - don't want to work
</div>
</div>
You can't expect the two DIVs which have float defined to float correctly, when you have non-floating element in between them.
My header text looks like:
My Hea....
I want it to read
My HeaderHereTodayAndIsTooLong
What do I have to change in the jquery mobile framework/css to make this render correctly?
<div data-role="header" data-position="fixed" data-tap-toggle="false">
<h2>My HeaderHereTodayAndIsTooLong</h2>
Home
</div>
Wrap your h2 tags in a div, if you want the text to appear in the centre still then add a text-align style to the container div just made:
<div data-role="header" data-position="fixed" data-tap-toggle="false">
<div style="text-align:center;">
<h2>My HeaderHereTodayAndIsTooLong</h2>
</div>
</div>
EDIT: To have your button appear on the right, remove the text-alignment and just apply some styles to your header to position it how desired, rough example:
<div data-role="header" data-position="fixed" data-tap-toggle="false">
<div>
<h2 style="font-size:0.8em;margin-left:10px;width:70%;">My Header Here Today And Is Too Long</h2>
</div>
Home
</div>
You can try just overriding the margin styles that JQM adds to the hx, of course that will only buy you a bit more space, eventually if your header text is to long it will still overflow (you can of course override those styles to).
for example
.lrMarg0
{
margin-left:0px !important;
margin-right:0px !important;
}
<div data-role="header" data-position="fixed" data-tap-toggle="false">
<h2 class="lrMarg0">My HeaderHereTodayAndIsTooLong</h2>
Next
</div>
For some reason div elements change their parents during rendering in unexpected way, reproducible in Firefox and Chrome.
E.g.
<div class="main">
<div class="slot"/>
<div class="slot"/>
</div>
<div class="footer"></div>
Firefox debugger will show as this at runtime as:
<div class="main">
<div class="slot"><div class="slot"/></div></div>
<div class="footer"></div>
</div>
When I remove .slot elements(see the code attached), everything renders as expected(#footer place in tree after rendering is same as in the source).
Code:
http://pastebin.com/3j3aQFdh
The problem is that you use empty divs: like that
<div />
You should try to change your code to use valid divs with empty content:
<div></div>
I am making a WYSIWYG webpage editor: http://brokenmyriad.com/editor2.php, however I have come across a problem when trying to add image functionality.
Note: the image is not inside a contenteditable element, but is just a normal floated image.
The problem can be recreated by clicking into either the paragraph or the heading and the clicking the insert image button on the toolar (the far right button). (on the above linked page).
In standards based browsers it works as expected, and the heading and the paragraph are both to the right of the image, however in ie6 the paragraph is under the floated image like in this picture: http://tinypic.com/view.php?pic=2mfcfo8&s=3
My simplified code structure is as follows:
<div>
<img style='float:left'>
<h1>Click here to edit!</h1>
</div>
<div>
<p>Click here to edit!</p>
</div>
What I want is for the <p> element to be alongside the floated image, and under the <h1> element as it is in standards based browsers.
Any help would be greatly appreciated!
Why is the paragraph in a separate div? Wouldn't the following work:
<div>
<img style='float:left'>
<h1>Click here to edit!</h1>
<p>Click here to edit!</p>
</div>
If you must have the divs, then the second one needs to be nested
<div style="float: left;">
<img style='float:left'>
<h1>Click here to edit!</h1>
<div style="float: left;">
<p>Click here to edit!</p>
</div>
</div>
Your second div should be floated left:
<div>
<img style='float:left'>
<h1>Click here to edit!</h1>
</div>
<div style="float:left;">
<p>Click here to edit!</p>
</div>
It turned out that the elements had width:100% on them, which was causing the error.