How do I prevent one div from wrapping beneath another? Specifically, I want the 2nd div to always be to the right of the 1st div, even if the browser width is resized such that the 2nd div's contents must wrap.
I always want the divs to be side by side:
and to never look like this, even if the browser window is resized such that the 2nd div's contents must wrap:
<!DOCTYPE html>
<html lang="en">
<body>
<div class="columns">
<div style="background-color: #990000; width:70px; float: left">
Pic
</div>
<div style="background-color: #00FF00; float: left; " >
body some interesting large amount of content. some interesting large amount of content.
</div>
</div>
</body>
</html>
<div class="columns">
<div style="background-color: #990000; width:70px; float: left">
Pic
</div>
<div style="background-color: #00FF00; margin-left: 70px;" >
body some interesting large amount of content. some interesting large amount of content.
</div>
</div>
An example: http://jsfiddle.net/arPzt/
Related
I want the page to be 100vh in height, so that there are no scrollbars on the whole page. For some reason the main grid is bigger than the screen size and some of the elements are getting clipped.
<html>
<body>
<div id="root">
<div class="app_container">
<div class="navigation">
<div class="navigation_logo_container"><img src="/icon.9c86b69e.png"
class="navigation_logo"><span>Sample</span></div>
<div class="navigation_buttons_container">
<div><span>Sample</span></div>
<div><span>Sample</span></div>
<div><span>Sample</span></div>
<div><span>Sample</span></div>
</div>
</div>
<div class="game">
<div class="quiz"><span class="question_text">Sample</span>
<div class="answer_choices">
<div class="answer_choice"><span>Sample</span></div>
<div class="answer_choice"><span>Sample</span></div>
<div class="answer_choice"><span>Sample</span></div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Codepen: https://codepen.io/GuacomoleCyclone/pen/RwKjmzO
Base on your setup the 100vh is working but your children are adding to the cause...
Meaning you have nav with height on fit-content...so lets just say 65px;
but then you have game div at height: 100%
If you remove that nav it works as you want, ..so for easily to solve this, you would have to also equate that extra height besides 100% game(nav height).
So meaning you would have to give:
.game {
height: calc(100% - 65px);
}
There are other ways to solve your setup without doing this but this is one of them.
Using the HTML below, I want the first div to have a static width of 265px. The second div should be next to the first one, but should be responsive (by shrinking the window this div should also shrink). How can I achieve this?
<div class="styles container">
<h1>Styles</h1>
</div>
<div class="preview container">
<h1>Preview</h1>
</div>
width: calc() will not work in all browsers.
Look at browser-support
<div style="width: 265px; float: left; background: #00f;">
test
</div>
<div style="width: calc(100%-265px); background: #000;">
test
</div>
I have some divs which don't behave like I wish.
<div class="list-product-with-border">
<div style="width:80px; display:inline-block;">img</div>
<div style="display:inline-block;"><b>Productname</b></div>
<div style="float:right; width:80px;">
<div>
<button id="editBtn">Edit</button>
</div>
<div>
<button id="removeBtn">Remove</button>
</div>
</div>
</div>
JSFiddle link
Two problems here:
the bordered divs is not high enough: the 'remove' button is not visually in the bordered div
When the 'product name' is longer, the buttons are rendered under the div with the product name. I would like the product name to be over multiple lines when this happens. The three divs should always be next to eachother.
The first and last div has a fixed width, the middle div (product name) should stretch with the size of the bordered div
Personally I'd use a table for this. Each row of the table is an item, and you have a column of images, a column of names, and a column of actions. Is this any different to the tables used for invoices?
I can't quite get the effect you want, but improvements can be made: a floated element should come before the elements that are to go around it - so in this case, it should be the first thing inside the list-product-with-border container. Also, you should either have an element with clear:both at the end of the container, or set the container to have overflow:hidden to force the floated element to be inside.
Do you want it like this?
Here's the Fiddle
<style>
.list-product-with-border {
padding:3px;
width:60%;
border:1px solid black;
overflow: hidden;
height: auto;
}
</style>
And now the HTML
<div class="list-product-with-border">
<div style="width:80px; display:inline-block;">img</div>
<div style="display:inline-block; overflow:hidden; height: auto;"><b>Productname Is the right choice baby, as you can see its just done</b></div>
<div style="float:right; width:180px;margin-top: 10px;">
<div style="float: left;">
<button id="editBtn">Edit</button>
</div>
<div style="float: left;">
<button id="removeBtn">Remove</button>
</div>
</div>
</div>
</div>
You must use display:table-cell instead of display:table-column and remove float:left for .divCell.
And add this style:
.headRow{
display:table-row;
}
Hi I have some html that looks like this:
<div id="wrapper" style="background-color: red;">
<div style="margin: 0px auto; width: 960px;">
Text here...
</div>
</div>
The wrapper-div doesn't fit the <body>, when I resize the browser window to be lower than 960px, the wrapper gets as small as the browser window size. I want to get the wrapper at least as wide as the content inside it. I really have a hard time figuring this one out. Any suggestions?
Set wrappers style to: min-width: 960px .. same as inner div
Set the width of upper div
<div id="wrapper" style="background-color: red; width: 960px;">
<div style="margin: 0px auto;">
Text here...
</div>
</div>
for a detailed description refer this
I have a fluid layout made with collapsible divs. When they collapse, they leave an empty space underneath, which is automatically filled by the next div (they all have float: left). This however does not look good and I would like to maintain the "row structure" without loosing the ability to move the divs around (when the window gets smaller). JSFiddle here.
CSS snippet:
.clickable {
border: 1px dotted black;
width: 200px;
float: left;
height:50px;
margin-right:20px;
margin-bottom:20px;
}
HTML snippet:
<html>
<head><title>Layout test</title></head>
<body>
<div class="clickable"> 1 </div>
<div class="clickable"> 2 </div>
<div class="clickable"> 3 </div>
<div class="clickable"> 4 </div>
<div class="clickable"> 5 </div>
<div class="clickable"> 6 </div>
</body>
<html>
Is there a pure CSS solution? I would like not to mess with JavaScript. I know I can dynamically determine the number of columns and then wrap them into "rows", but I'm not willing to use this solution yet.
Change your float: left to display: inline-block. That's the only change I made to your fiddle, and seems to give the effect you're looking for.
http://jsfiddle.net/GLf7m/2/