<!DOCTYPE html>
<html>
<head>
<style>
* {margin:0;padding:0;outline:0;border:0;}
aside {background:red;width:40%;display:table-cell;}
.two {width:40%;background:blue;display:table-cell;}
.one {width:30%;background:green;display:table-cell;}
#wrapper {display:table;width:100%;}
</style>
</head>
<body>
<div id="wrapper">
<aside>
<div style="height: 100px; width: 100px; border: 2px solid orange;">
</div><!-- / -->
</aside>
<section class="two">
Text
</section>
<section class="one">
Text
</section>
</div>
</body>
</html>
Here is a JSFiddle of the code: http://jsfiddle.net/jtmkrueger/Aza47/
How can I get the content in the cells to always be valigned to the top in this situation? Notice that 'text' in the second and third boxes is pushed down...
Use a vertical-align: top; style.
See the updated jsfiddle.
Related
I have (2) div elements displayed as inline-block's.
I'm attempting to make the second div container that is wrapped around a <p> element extend to the width of the screen. Not sure how to accomplish this.
Ideally, the red container will stretch to the edge of the screen to the right.
<div style="background-color: grey; width:16px; display: inline-block;">
<p>-</p>
</div>
<div style="background-color: red; display: inline-block;">
<p>Test Text</p>
</div>
You want the second block to behave like a display: block (taking up as much width as possible) while keeping the first block as a display: inline-block.
Thus, in this case, you need a float: left, not display: inline-block.
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div style="background-color: grey; width:16px; float:left">
<p>-</p>
</div>
<div style="background-color: red;">
<p>Test Text</p>
</div>
</body>
</html>
Note: a more modern way of doing this is using display: flex.
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div style="display: flex;">
<div style="background-color: grey; width:16px;">
<p>-</p>
</div>
<div style="background-color: red; flex: 1;">
<p>Test Text</p>
</div>
</div>
</body>
</html>
If you want to keep your element as display: inline-block, you can make use of calculation-driven variables, and set the second div to occupy 100% of the width of the container minus the width of the first element (and margins):
:root {
--left-width: 16px;
}
div:nth-of-type(1) {
display: inline-block;
background-color: grey;
width: var(--left-width);
}
div:nth-of-type(2) {
display: inline-block;
background-color: red;
width: calc(100% - var(--left-width) - 4px);
}
<div>
<p>-</p>
</div>
<div>
<p>Test Text</p>
</div>
I'm trying to make a simple three-column layout for a Flask website. This is my code:
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="{{ url_for('static',filename='style.css') }}">
</head>
<body>
<div class="row">
<div class="left">
<p>hi</p>
</div>
<div class="middle">
<p>jello</p>
</div>
<div class="right">
<p>hello</p>
</div>
</div>
</body>
</html>
CSS:
.left{ float: left; width: 33.333%; }
.right{ float: right; width: 33.333%; }
.middle{ display: inline-block; width: 33.333%; }
When I do this on a normal HTML webpage, three columns appear and everything looks perfect. However, in Flask, the three columns are just stacked on top of each other:
Why does this happen?
What I need is two divs in following fashion:
[-width-of-content-][------------------remaining-width-of-page----------------------------]
I remember how in olden days it was a breeze to do this by using tables. But now tables are taboo, so how do I achieve this with div? I have been spending hours trying to figure this one out!
<div style='float:left;display:inline-block'> Hello</div>
<div style='float:left;width:100%''> THIS DIV BREAKS</div>
You could also achieve this using flexbox: http://jsfiddle.net/yr05wkuh/1/
This would keep your DIVs the same height, without requiring you to set a value.
CSS
.container {
display: flex;
}
.div1{
background-color:yellow;
}
.div2{
flex: 1 0;
background-color: red;
}
HTML
<div class="container">
<div class="div1"> Hello</div>
<div class="div2"> THIS DIV BREAKS</div>
</div>
Here's a good resource: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
You only need to float the left element.
HTML
<div id="left">Hello yoyoyoy jrllo hello blah blah</div>
<div id="right"></div>
CSS
#left,#right{
height:50px;
}
#left{
background:red;
float:left;
}
#right{
background:green;
}
https://jsfiddle.net/qb3374ou/
EDIT: right div with content.. same result
https://jsfiddle.net/qb3374ou/1/
two divs side-by-side is impossible but this might work:
<div class="row">
<div class="col-md-10 col-md-offset-1">
width of content
<div class="col-sm-9">
Remaining width of page
</div>
</div>
</div>
hope it helped.. .
Sorry bro,.. my mistake... this one is more working :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-sm-4" style="background-color:lavender;">Width of content</div>
<div class="col-sm-8" style="background-color:lavenderblush;">Remaining Pages</div>
</div>
</div>
</body>
</html>
Not sure if I'm understanding you correctly, but I think you're trying to get this:
HTML:
<div class="right">Text goes here</div>
<div class="left">Text for the left div goes here</div>
CSS:
.right {
float:right;
background: #ddd;
background-repeat: no-repeat;
width: 240px;
height: 100px;
}
.left {
background-color:#ccc;
height: 100px;
}
fiddle: http://jsfiddle.net/veW2z/88/
Actually,"col-md-" are the classes of Bootstrap ..u need to include the Bootstrap css to make it work..Here is the link for itenter link description here
This contain complete Bootstrap but u need to include only the css in it and write the code
I have a responsive <div> element placed in between two fixed <div> elements. I've tried the following code:
<html>
<head>
<title>Sample1</title>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.min.css">
</head>
<body>
<div style="width: auto">
<div style="float: left; width:270px; background-color: green">Fixed div</div>
<div style="float: right; width: 120px; background-color: yellow"> Fixed div</div>
<div style="background-color: red" class="row">Responsive div</div>
</div>
</body>
</html>
Currently the responsive <div> element is taking the whole screen. When I try to checkout the width and height, it has acquired my entire main <div>. Is there any approach where I can put this responsive <div> inside 2 fixed <div>?
Check below code: Here I have altered Div sequence and change display style of the three.
<html>
<head>
<title>Sample1</title>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.min.css">
</head>
<body>
<div style="display:table; width:100%">
<div style="display:table-cell; width:270px; background-color: green">Fixed div </div>
<div style="background-color: red; display:table-cell;"> Responsive div </div>
<div style="display:table-cell; width: 120px; background-color: yellow"> Fixed div</div>
</div>
</body>
</html>
Since you got their div widths already, we can took advantage of the calc
width: calc(100% - 390px);
The 390px value is the sum of the width of left and ride side elements.
<html>
<head>
<title>Sample1</title>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.min.css">
</head>
<body>
<div style="width: auto">
<div style="float: left; width:270px; background-color: green">Fixed div </div>
<div style="float: right; width: 120px; background-color: yellow"> Fixed div</div>
<div style="background-color: red; width: calc(100% - 390px);margin-left: 270px;" class="row"> Responsive div </div>
</div>
</body>
</html>
Try with this:
<body style="display:table;width:100%;">
<div style="float: left; width:270px; background-color: green;display:table-cell;">Fixed div </div>
<div style="background-color: red;display:table-cell;" class="row"> Responsive div </div>
<div style="float: right; width: 120px; background-color: yellow;display:table-cell;"> Fixed div</div>
</body>
Here is what my print page look like,
Here is my html glimpse,
<style>
.container{
float: left;
border: 1px solid Black;
width: 400px;
height: 350px;
margin: 10px;
padding: 10px;
page-break-inside: avoid;
}
.container img{
max-width: 200px;
max-height: 200px;
}
</style>
<div class="container">
<b>Name: </b>#Product.Name<br />
<b>Model: </b>#Product.ModelNumber<br />
<img src="#Product.ImagePath" /><br />
<span style="font-size: 20px">DetailedDescriptions</span><br />
#foreach(var attr in Product.DetailedDescriptions){
#attr.Header<br />
}
<span style="font-size: 20px">KeyAttributes</span><br />
#foreach(var attr in Product.KeyAttributes){
#attr.Name<br />
#attr.Value<br />
}
</div>
How to make sure that the page break after every 6 divs using css
You should encapsulate your divs and create a better structure of this type in HTML:
<body>
<div class="container-holder">
<div class="container-row">
<div class="container"></div>
<div class="container"></div>
</div>
<div class="container-row">
<div class="container"></div>
<div class="container"></div>
</div>
<div class="container-row">
<div class="container"></div>
<div class="container"></div>
</div>
</div>
<div class="container-holder">
<div class="container-row">
<div class="container"></div>
<div class="container"></div>
</div>
<!-- keep adding more container-rows -->
</div>
</body>
Then in CSS take several things into account:
let body take up whole page
use page-break-inside: avoid;
give specific width and height in pixels to divs
containers should have the display: inline-block and vertical-align: bottom;
container-holders should have display:block property
[bonus] avoid inline style
Here is a working jsFiddle
I have tried it outside of jsFiddle and I get this result:
You can use
div:nth-of-type(6n) {
page-break-after:always;
}
to insert a page-break after each 6. div, but I think this will not work with floats.
You could do it this way:
FIDDLE
.wrapper div:nth-child(6n)
{
margin-bottom: 300px;
}
Which means: after every 6 containers - add a bottom margin of x px (how ever much you need) so that it pushes the next boxes to the next page.