We Keep Coding

Is there a way to get css width:auto working when contents flows around a floated element?

I have a div which I need to expand to show the contained text and only wrap the text once the div would exceed the specified max-width. This works fine if the div content is just text but if the text floats around a floating element, the width of the div is calculated as if the floating element were not there. This causes the text to wrap even though the div is well below it's max-width.
See example below with two divs that are identical apart from the second having a floated box in the corner.
Clicking the button repeatedly in the first div correctly causes the div to expand correctly so the text only starts to wrap when the 500px max-width is reached.
When you do the same to the second div the div does not correctly expand to contain the contents without the text wrapping. It appears the div width only increases when the text content reaches the length if it were not flowing around the floated div.
Short of a javascript to calculate and manually adjust the width, is there a way in CSS to make the auto width behave as expected?
function fillDialog(el) {
var contents = el.parentElement.getElementsByClassName('content');
var old_html = contents[0].innerHTML;
contents[0].innerHTML = old_html+" more text";
}
#page {
background:white;
width:100%;
height:600px;
position:relative;
padding:20px;
}
.dialog {
position: relative;
clear:both;
float:left;
border: 2px black solid;
margin-top:20px;
padding:20px;
min-height:120px;
width:auto;
min-width:200px;
max-width:500px;
box-sizing: border-box;
}
.modalButton {
position: absolute;
bottom: 10px;
left: 10px;
z-index: 1;
}
.icon {
float:left;
width:30px;
height:30px;
background-color:cornflowerblue;
margin:0px 10px 10px 0px;
padding:10px;
border:1px black solid;
text-align: center;
font-size: 30px;
}
<div id="page">
<div style="width:200px; float:left; background-color: #999;">200px</div>
<div style="width:300px; float:left; background-color: #BBB;">500px</div>
<div class="dialog">
<button class="modalButton" type="button" onclick="fillDialog(this)">Add text</button>
<div class="content">Content
</div> <!-- close content -->
</div> <!-- close dialog -->
<div class="dialog">
<button class="modalButton" type="button" onclick="fillDialog(this)">Add text</button>
<div class="icon"> ! </div>
<div class="content">Content
</div> <!-- close content -->
</div> <!-- close dialog -->
</div> <!-- close page -->

You can use display flex to get what you want.
function fillDialog(el) {
var contents = el.parentElement.getElementsByClassName('content');
var old_html = contents[0].innerHTML;
contents[0].innerHTML = old_html+" more text";
}
#page {
background: white;
width: 100%;
height: 600px;
position: relative;
padding: 20px;
}
.dialog {
width: fit-content;
position: relative;
display: flex;
border: 2px black solid;
margin-top: 20px;
padding: 20px;
min-height: 120px;
min-width: 200px;
max-width: 500px;
box-sizing: border-box;
}
.modalButton {
position: absolute;
bottom: 10px;
left: 10px;
z-index: 1;
}
.icon {
flex-shrink: 0;
width: 30px;
height: 30px;
background-color: cornflowerblue;
margin: 0px 10px 10px 0px;
padding: 10px;
border: 1px black solid;
text-align: center;
font-size: 30px;
}
<div id="page">
<div style="width:200px; float:left; background-color: #999;">200px</div>
<div style="width:300px; float:left; background-color: #BBB;">500px</div>
<div class="dialog">
<button class="modalButton" type="button" onclick="fillDialog(this)">Add text</button>
<div class="content">Content
</div> <!-- close content -->
</div> <!-- close dialog -->
<div class="dialog">
<button class="modalButton" type="button" onclick="fillDialog(this)">Add text</button>
<div class="icon"> ! </div>
<div class="content">Content
</div> <!-- close content -->
</div> <!-- close dialog -->
</div> <!-- close page -->

Particle js hiding web elements below it

I am using particle js as a background image.Now
<div id="particles-js"></div>
<div class="text">
<h1>Particles Background</h1>
</div>
I have to set position attribute of .text as absolute. Otherwise the section remains hidden. I don't seem to understand why others become hidden. I can't use absolute as it will break my code. Below is the css. Only if I set .text as position:absolute it will display
#particles-js {
position: relative;
width: 100%;
height: 100%;
background: grey;
}
.text {
position: relative;
top: 50%;
right: 50%;
}
<div id="particles-js"></div>
<div class="text">
<h1>Particles Background</h1>
</div>

You are facing this issue possibly because of heighr z-index value for #particle-js
You can do it by either making position: absolute; for #particle-js and/or increasing the z-index for .text
To understand more about positions please check this link

You are using divs which by default have layout but with no contents have no size. You also position the right of one element so the text is off screen. You can then fix that by right align of the text in the div. Here I put two examples to help understand the differences, one with no content as you have and one with a right aligned text.
I put some borders on just so you have a visual of the elements.
#mycontainer{border:solid lime 1px;}
#particles-js {
position: relative;
width: 100%;
height: 100%;
background: grey;
border: solid 1px blue;
}
.text {
position: relative;
top: 50%;
right: 50%;
border: solid 1px red;
}
<div id="mycontainer">
<div id="particles-js">cheese </div>
<div class="text">
<h1>Particles Background</h1>
</div>
</div>
Second example
#mycontainer {
border: solid lime 1px;
width: 100%;
height: 100%;
}
#particles-js {
position: relative;
width: 100%;
height: 100%;
background: grey;
border: solid 1px blue;
}
.text {
position: relative;
top: 50%;
right: 50%;
border: solid 1px red;
text-align:right;
}
<div id="mycontainer">
<div id="particles-js">
</div>
<div class="text">
<h1>Particles Background</h1>
</div>
</div>

How to fix an element to the right of div?

I have a button which i want to fix it's position to the right of a div, the button is toggling the visibility of it's left div, problem is the button loses it's position once the resolution is changing...
Here is an Example
And here is what I've done so far:
$('.results_toggle').on('click', function() {
$(this).toggleClass('left_hide');
$('.left').toggle();
});
.cont {
width: 100vw;
}
.left {
position: relative;
width: 50vw;
height: 100vh;
background-color: grey;
float: left;
border-left: 2px solid white;
}
.right {
height: 100vh;
width: 50vw;
float: left;
}
.results_toggle:before {
content: "\f054";
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
color: black;
font-size: 24px;
padding-right: 0.5em;
position: absolute;
top: 14px;
left: 5px;
}
.results_toggle {
background-color: grey;
height: 60px;
width: 30px;
position: absolute;
z-index: 106;
top: 45vh;
right: 223px;
border-bottom-right-radius: 110px;
border-top-right-radius: 110px;
border-bottom: 0;
}
.left_hide {
left: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cont">
<div class="left">
</div>
<div class="results_toggle">
<!-- the button -->
</div>
<div class="right">
</div>
</div>

The simplest solution to this would be to put the toggle within the .right div, and position it at left: 0 so that it is always adjacent to the .left div, something like this:
<div class="cont">
<div class="left"></div>
<div class="right">
<div class="results_toggle"></div>
</div>
</div>
.right {
position: relative; /* add this */
}
.results_toggle {
/* remove 'right' */
left: 0; /* add this */
}
Working example
The advantage of this method is that it will be completely unaffected by any change in screen resolution.

You use viewport units , so the values of them will change when changing the viewport size ( resolution ) .
If you want the arrow to stay in the middle ( and so, on the right side of the grey div ) , you should center it this way
See snippet below
$('.results_toggle').on('click', function() {
$(this).toggleClass('left_hide');
$('.left').toggle();
});
.cont {
width: 100vw;
}
.left {
position: relative;
width: 50vw;
height: 100vh;
background-color: grey;
float: left;
border-left:2px solid white;
}
.right {
height: 100vh;
width: 50vw;
float: left;
}
.results_toggle:before {
content: "\f054";
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
color: black;
font-size: 24px;
padding-right: 0.5em;
position: absolute;
top: 14px;
left: 5px;
}
.results_toggle {
background-color: grey;
height: 60px;
width: 30px;
position: absolute;
z-index: 106;
top: 50%;
right:50%;
transform:translate(100%,-50%);
border-bottom-right-radius: 110px;
border-top-right-radius: 110px;
border-bottom: 0;
}
.left_hide{
left:0px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cont">
<div class="left">
</div>
<div class="results_toggle">
</div>
<div class="right">
</div>
</div>

For me the best approach to align elements is to use Flexbox attributes. With those attributes, you can place element as boxes in a row, column...In your case you have a main box .cont with a left side and a right side. This is the result with a Flexbox placement :
The main div is represented by the red background. Inside you have your left div and aligned with your right button.
Here is the code to make this :
<html>
<head>
<meta charset='utf-8' />
<style type="text/css">
.cont
{
display: flex;
align-items: center;
background-color: red;
color: white;
}
.left
{
background-color: blue;
margin: 5px;
}
button
{
background-color: green;
}
</style>
</head>
<body>
<div class="cont">
<div class="left">
<p>Left div</p>
</div>
<div class="results_toggle">
<button>Right button</button>
</div>
<div class="right"></div>
</div>
</body>
</html>

not sure if that's what you meant, but i simply changed the leftattribute of the button to 50vw, the same as your grey box.
Here's a fiddle
edit:
another option: position: relative and float: left without left or right property
updated fiddle

It's because you've fixed each property.
You can fix an element at the right of his parent using absolute and relative position. And add the width of you child.
Example
.parent{
width:200px;
height:200px;
background-color:#ccc;
position:relative;
}
.child{
position:absolute;
right:0;
top:100px;
transform:translateX(100%) translateY(-50%);
}
<div class="parent">
<button class="child">btn</button>
</div>

Bootstrap and custom css top boxez

I want to make collapsible top boxes. but somehow I was not successful. I want to make objects such as cards on the links page materialize. but also bootstrap
card subject at this link: materializecss.com/cards.html
.card3 {
padding: 20px;
position: absolute;
background-color: #FFF;
width: 97.5%;
overflow-y: auto;
border-radius: 4px;
height: 92%;
z-index: 1;
overflow: hidden;
}
<div class="container">
<div class="row">
<div class="col-md-12">
<div id="card3" class="card3">
.......
</div>
<div class="panel panel-default">
<div class="row">
<div class="col-md-6">
......
</div>
<div class="col-md-6">
.......
</div>
</div>
</div>
</div>
</div>
</div>

Have you tried styling the other divs? Because right now only one of the divs has styling, and that usually doesn't end up with a properly styled product.

you can try this one:
.container
{
background:gray;
padding: 20px;
}
.col-md-12 {
padding: 10px;
background-color: #FFF;
width: 97.5%;
overflow-y: auto;
border-radius: 4px;
height: 12%;
z-index: 1;
overflow: hidden;
}
.wrong
{
float:right;
top:0px;
margin-top:-70px;
cursor:pointer;
}
DEMO HERE

Image stretches screen instead of fitting within div

I'm trying to make a page that fits on a single screen without any scrolling, but the CSS that defines its format that I've got isn't working.
The problem can be seen in the JSFiddle
The footer is fixed at the bottom of the screen (as it should be), but the background image (within content) extends from below the header to below the footer.
There also seems to be a problem with the background image when resizing the browser, but I'm sure that will be fixed when solving this problem.
I have the following code:
HTML: index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/main.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script>
function diff(A, B) {
return A.filter(function (a) {
return B.indexOf(a) == -1;
});
}
function show(shown) {
var all = ['home', 'about', 'projects', 'contact'];
var hide_these = diff(all, shown);
var hidden;
document.getElementById(shown).style.display='block';
for(hidden in hide_these)
document.getElementById(hide_these[hidden]).style.display='none';
$(".sidebar").slideToggle(600);
return false;
}
</script>
</head>
<body>
<div id="home">
<div class="header">
<div class="menu-btn"></div>
<h1>
Home
</h1>
</div>
<div class="sidebar">
<li>Home</li>
<li>About</li>
<li>Projects</li>
<li>Contact</li>
</div>
<div class="content">
<h1>Hello from Content!</h1>
</div>
<div class="footer">
Hello from footer.
</div>
</div>
<div id="about" style="display:none">
<div class="header">
<div class="menu-btn"></div>
<h1>
About
</h1>
</div>
<div class="sidebar">
<li>Home</li>
<li>About</li>
<li>Projects</li>
<li>Contact</li>
</div>
<div class="content">
<h1>Hello from Content!</h1>
</div>
<div class="footer">
Hello from footer.
</div>
</div>
<div id="projects" style="display:none">
<div class="header">
<div class="menu-btn"></div>
<h1>
Projects
</h1>
</div>
<div class="sidebar">
<li>Home</li>
<li>About</li>
<li>Projects</li>
<li>Contact</li>
</div>
<div class="content">
<h1>Hello from Content!</h1>
</div>
<div class="footer">
Hello from footer.
</div>
</div>
<div id="contact" style="display:none">
<div class="header">
<div class="menu-btn"></div>
<h1>
Contact
</h1>
</div>
<div class="sidebar">
<li>Home</li>
<li>About</li>
<li>Projects</li>
<li>Contact</li>
</div>
<div class="content">
<h1>Hello from Content!</h1>
</div>
<div class="footer">
Hello from footer.
</div>
</div>
<script>
$(function() {
$('body').addClass('loaded');
});
$(".menu-btn").on("click", function(){
$(".sidebar").slideToggle(600);
});
$(".header h1").delay(500).animate({"opacity": "1"}, 700);
</script>
</body>
</html>
CSS: main.css
html,body {
padding: 0;
margin: 0;
font-family: arial;
}
html, body, #home{
width: 100%;
height:100%;
}
a {
color: black;
}
a:visited {
text-decoration: none;
color: black;
}
#home{
min-height:100%;
position:absolute;
}
#about, #projects, #contact{
width: 100%;
height:100%;
}
body .sidebar {
display:block;
}
body.loaded .sidebar {
display:none;
}
.header {
background-color: black;
height: 80px;
width: 100%;
font-family: cursive;
text-align: center;
color: white;
display:flex;
align-items: center;
z-index: 1;
position:relative;
}
.menu-btn {
background-image: url("../images/menu.png");
height: 48px;
width: 44px;
margin-left:50px;
}
.header h1 {
opacity: 0;
width:100%;
margin:0;
padding:0;
}
.sidebar {
position: absolute;
width: 200px;
top: 80px;
bottom: 0;
padding-top: 10px;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* IE 8 */
filter: alpha(opacity=50); /* IE 5-7 */
-moz-opacity: 0.5; /* Netscape */
-khtml-opacity: 0.5; /* Safari 1.x */
opacity: 0.5; /* Good browsers */
}
.sidebar li {
color: black;
list-style-type: none;
margin-top: 10px;
width: 100%;
}
.sidebar li a {
text-decoration: none;
margin-left: 30px;
background-color: #9da1a4;
width: 100px;
padding: 8px;
border: 1px solid silver;
border-radius: 5px;
display: block;
}
.sidebar li a:hover {
background-color: #ebebeb;
}
.content {
top: -80px; /* Header height */
bottom: 30px;
background-image:url("../images/arbor.jpeg");
background-size: cover;
min-height: 100%;
min-width: 100%;
padding-top: 80px;
padding-bottom: 10px;
text-align: center;
}
.content p {
padding-top: -10px;
text-align: center;
color: black;
}
.footer {
width:100%;
height:30px;
text-align: center;
color: white;
background-color: black;
padding-top: 10px;
bottom:0;
left:0;
position: absolute;
}
.footer a img {
position: relative;
top: -5px;
}
My attempt to fix was setting the .content area from height = [30px, -80px] (i.e., from the top of the footer to the bottom of the header).
I'm brand new to CSS, so I'm sure this is very poorly formatted, so sorry in advance.
Thanks everyone,
erip

If you want to show everything on a single page without any scrolling then Give position:fixed to body. You can see the result here http://jsfiddle.net/mcnn1d81/1/ .

So if I understand you properly, you want the footer to line the bottom of your content while making sure to fill the browser, no matter the size. This looks like a job for "relative" positioning! Currently your footer is set to "absolute", which is why it overlaps your background.
here's an updated fiddle with RELATIVE changes: https://jsfiddle.net/mcnn1d81/13/
.footer {
width:100%;
height:30px;
text-align: center;
color: white;
background-color: black;
padding-top: 10px;
bottom:0;
left:0;
position: RELATIVE;
}
.content {
top: 0px; /* Header height */
bottom: 30px;
background-image:url("http://i.imgur.com/3WWnZZj.jpg?1");
background-size: cover;
min-height: 100%;
min-width: 100%;
padding-top: 80px;
padding-bottom: 10px;
text-align: center;
position:RELATIVE;
}
I hope that helps!
EDIT: Added code to keep the content in the screen. https://jsfiddle.net/mcnn1d81/20/
This a quick, rough edit, and realize that what's written will only adhere to the content you put in it. As soon as you tell the content how big it needs to be you'll cause some wonky things to happen.
If you want dynamic content (that stretches and fits the screen) you'll have to add some code to the resize function to make sure everything stays the same in the CSS. I'd add more, but I've got other things I need to get to. I hope this pushes you in the right direction!

just update your css with this.
html,body {
padding: 0;
margin: 0;
font-family: arial;
height:100%;
width:100%;
overflow:hidden;
}
.content {
top: -80px; /* Header height */
bottom: 30px;
background-image:url("http://i.imgur.com/3WWnZZj.jpg?1");
background-size: 100%;
min-height: 100%;
min-width: 100%;
padding-top: 80px;
padding-bottom: 10px;
text-align: center;
overflow:hidden;
}
that will fix your issue
you can keep background-size : cover; for .content class. it will best option to set your background image.

Try this :
body
{
margin:0%;
overflow:hidden;
}