I have three div's and I want two side divs seize as only space that is demanded by their content, and middle div to be as wide as possible. That's of cource in one row and with CSS.
The code is something like:
<div class='wrapper'>
<div class='small'>Left/div>
<div class='big'>Big</div>
<div class='small'>Right</div>
</div>
Any clues?
Have a look at The Perfect 3 Column Liquid Layout.
And here's one on Dynamic Drive.
Finally, for historical reasons, here's the A List Apart Holy Grail article.
The Perfect 3 Column Liquid Layout is a good place to start. You could also try something like this, which is very similar to that.
<html>
<head>
<title></title>
<style type="text/css">
.small1 {
float: left;
width: 20%;
height:100%;
}
.small2 {
float: right;
width: 20%;
height: 100%;
}
.big {
width: 60%;
height: 100%;
margin-left: 20%;}
</style>
</head>
<body>
<div class='small1'>Small1</div>
<div class='small2'>Small2</div>
<div class='big'>Large</div>
</body>
</html>
Edited due to slight markup mistake.
you can also use multiple wrappers (that way it'll be easier to set backgrounds)
<head>
<style>
.wrapper{background-color:black;}
.wrapperLeft{float:left;background-color:blue;width:70%}
.small{float:left;width:20%;background-color:red;}
</style>
</head>
<body>
<div class='wrapper'>
<div class='wrapperLeft'>
<div class='small'>Left</div>
<div class='big'>Big</div>
</div>
<div class='small'>Right</div>
</div>
</body>
Related
I have been searching for a solution to this problem for almost two weeks now and I am still completely lost. I'm making a simple landing page and I don't want any scrolling. I need a header followed by a bootstrap row containing a paragraph and an image. Here is my ms paint example:
Simple enough right? Well I can not for the life of me figure out how to get that image to shrink to fit into that row. Here is what is happening to me now. Note: When you run the snippet on stackoverflow the window is to small. It is easier to see whats going on with the JSFiddle
body, html {
height: 100%;
width: 100%;
position: absolute;
margin: 0;
}
.content {
}
img {
height: 100%;
}
h1 {
background-color: white;
}
.banner {
height: 90%;
background-color: red;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<div class="banner">
<h1>
Header
</h1>
<div class="row content">
<p> Hello World </p>
<img src="https://upload.wikimedia.org/wikipedia/commons/8/89/Portrait_Placeholder.png">
</div>
</div>
Result
The part that throws me off is that the .row extends beyond it's parent container .banner. How do we force this to stay inside that red area?
I've messed with object-fit, flex-grow, flex-shrink, a flex-basis and none of these seem to create the desired behavior. I'm going insane trying to figure this problem out. Maybe flexbox is the wrong tool to use here? But I'm trying to take advantage of the bootstrap grid system's media queries. Thanks in advance for any help!
Note: The reason I have everything nested in the <div class=".banner"> is because I want the header to have a shadow onto the red background.
Edit
The root of my question is how do I get an image to fit inside of a row that only covers the red area?
You can update your code like below:
img {
/* this will make the image stretch and no overflow*/
height:0;
min-height:100%;
/**/
}
h1 {
background-color: white;
}
.banner {
height: 90vh;
background-color: red;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" >
<div class="banner d-flex flex-column"> <!-- flex container here -->
<h1>
Header
</h1>
<div class="d-flex content flex-grow-1 p-2"> <!-- flex-grow here to fill remaining space -->
<p> Hello World </p>
<img src="https://upload.wikimedia.org/wikipedia/commons/8/89/Portrait_Placeholder.png" class="ml-auto">
</div>
</div>
Try this:
<div class="banner">
<h1>Header</h1>
<div class="row content">
<div class="col-6">
<p> Hello World</p>
</div>
<div class="col-6">
<img src="https://upload.wikimedia.org/wikipedia/commons/8/89/Portrait_Placeholder.png">
</div>
</div>
</div>
Working example: Codepen.
PS.: In my example I tried to follow your ms paint example.
Use display:block to the img & this also helps in responsiveness you can check the fiddle if you want to explore.
OR
You can also look into vh for height and vw for width that will take care of all screen resolutions.
fiddle to playaround.
body,
html {
height: 100%;
width: 100%;
position: absolute;
margin: 0;
}
.content {
height: 80%;
background-color: red;
display: flex;
justify-content: space-around;
}
img {
max-width: 100%;
max-height: 100%;
display: block;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<div class="header">
<h1>Header</h1>
</div>
<div class="row content">
<p> Hello World </p>
<img src="https://upload.wikimedia.org/wikipedia/commons/8/89/Portrait_Placeholder.png">
</div>
I'm realizing more and more that I don't have a good understanding of css positioning. Seeing that this often causes problems for me, I've been attempting to create different layouts just for practice. I'm trying to create a website that could hold 6 different divs that display 6 different data points. Two large divs and the top each covering 50% of the screen, 4 smaller divs below each covering 25% of the screen.
I did some research and found that float left would give me the results for the top half, but I can't seem to figure out how to position the the bottom four divs so that they stay flushed with the divs above and to side. Everything that I've tried so far fails whenever I resize the screen. Can someone point me in the right direction please?
here is a pic of what I have so far. The top half is right, the bottom half is what i'm stuck on
here is my html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>flatpage</title>
<link rel="stylesheet" href="css.css">
<div id ="main">
<div class = "navbar">
</div>
<div class = "total_number_container">
</div>
<div class = "searched_number_container">
</div>
<div class = "attribute_one>"
</div>
<div class = "attribute_two>"
</div>
<div class = "attribute_three>"
</div>
<div class = "attribute_four>"
</div>
</div>
</head>
<body>
<script src="js/scripts.js"></script>
</body>
</html>
here is my css
body {
background-color:#ecf0f1;
margin:0;
}
.navbar{
background-color:#2c3e50;
width: 100%;
height: 50px;
margin:0;
padding:0;
}
.total_number_container {
background-color:#3498db;
float: left;
width: 50%;
height: 300px;
}
.searched_number_container {
float:left;
background-color:#2980b9;
width: 50%;
height: 300px;
}
.attribute_one {
background-color:#5C97BF;
width: 25%;
height: 300px;
}
.attribute_two {
background-color:#34495e;
width: 25%;
height: 300px;
}
.attribute_three {
background-color:#5C97BF;
width: 25%;
height: 300px;
}
.attribute_four {
background-color:##34495e;
width: 25%;
height: 300px;
}
This fiddle corrects syntax mistakes in the original HTML and CSS code, and uses the original classes (.attribute_one, .attribute_two, .attribute_three, .attribute_four) to achieve the desired results.
http://jsfiddle.net/2G8C7/
The key things missing were:
.attribute_one, .attribute_two, .attribute_three, .attribute_four {
float: left;
}
And the following HTML syntax mistake:
<div class = "attribute_one>" <!-- notice the closing quote is in the wrong place -->
</div>
which should be
<div class = "attribute_one">
</div>
Also there was a typo in the CSS, where the background-color for .attribute_four had two #'s (##34495e)
You mean, something like the below?
This can be achieved using floats and % sizing.
Demo Fiddle
HTML
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
CSS
html, body {
width:100%;
height:100%;
margin:0;
padding:0;
}
div:nth-child(1), div:nth-child(2) {
width:50%;
}
div {
box-sizing:border-box;
float:left;
border:1px solid black;
width:25%;
height:50%;
}
<div class = "attribute_one>"
</div>
<div class = "attribute_two>"
</div>
<div class = "attribute_three>"
</div>
<div class = "attribute_four>"
</div>
Above is a part from your HTML and is wrong. What you want is
<div class = "attribute_one">
</div>
<div class = "attribute_two">
</div>
<div class = "attribute_three">
</div>
<div class = "attribute_four">
</div>
After that just use float:left for all four divs ans set the width to 25%. And after that is a best practice to put another div
<div style="clear:both"></div>
I am trying to style the layout I will use as a template for my site and after a lot of reading I came up with this:
HTML:
<body>
<link rel="stylesheet" type="text/css" href="style/login.css" />
<div id="wrapper">
<div id="header">
Header
</div>
<div id="main">
Main
</div>
<div id="footer">
Footer
</div>
</div>
</body>
CSS:
html{
height: 100%;
}
body{
height: 100%;
}
#wrapper{
height: 100%;
}
#header{
height: 100px;
width: 100%;
}
#main{
height: 100%;
width: 100%;
}
#footer{
width: 100%;
height: 50px;
text-align: center;
position: relative;
}
Seems to be working but for some reason the wrapper and the main div seem to take the exact same height and this makes the page grow larger than the window and scrolling down is needed to see the footer.
I tried a lot of stuff to fix this including CSS absolute positioning and I have been using different browsers to test it.
Any Ideas?
it is because you set height:100%; in your #main set is to 100px or something else and it will work
I would really like to suggest you look at using something like bootstrap grid..
It will make you layout life so much easier across all browsers..
you just create a container with rows, and add divs with certain spans in them and it aligns everything perfect.
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel="stylesheet">
<div class="container">
<div class="row" id="header">
</div>
<div class="row" id="body">
</div>
<div class="row" id="footer">
</div>
</div>
done :)
Further reading, takes like 10-15 min to figure out, then say goodbye to css nightmare..
http://www.revillwebdesign.com/twitter-bootstrap-tutorial/
http://twitter.github.io/bootstrap/scaffolding.html
First, put the link tag in the head section of the HTML document not in the body section.
As far as the css, I would not set heights on elements. Instead, only set the height if absolutely necessary. Let the content, padding and margin push the footer down to the appropriate height.
I need a way to make a div repeat a certain number (36) of times vertically, with 1px of space between each one. The divs are absolutely positioned, so styling each one individually would be a ton of CSS.
I don't mind putting 36 divs into the HTML directly, although I'd prefer not to, but styling each one would be inefficient.
How about nest them?
you can nest them with relative positioning or maybe some margin: http://jsfiddle.net/zWbUu/
HTML
div id="container">
<div class="square">
<div class="square">
<div class="square">
<div class="square">
<div class="square">
<div class="square"></div>
</div>
</div>
</div>
</div>
</div>
</div>
​
CSS:
#container {
position: absolute;
top: -21px;
left: 20px;
}
.square {
background-color: #666;
width: 20px;
height: 20px;
position: relative;
top: 21px;
}​
If you need some content int them, you can use a nested absolute positioned div or this trick: http://jsfiddle.net/zWbUu/1/
HTML:
<div id="container">1 (doesn't apear)
<div class="square">2
<div class="square">3
<div class="square">4
<div class="square">5
<div class="square">6
<div class="square">7</div>
</div>
</div>
</div>
</div>
</div>
</div>
​CSS:
#container {
position: absolute;
top: -20px;
left: 20px;
}
.square {
background-color: #666;
width: 20px;
height: 20px;
line-height: 20px;
position: relative;
top: 1px;
color: #fff;
text-align: center;
}​
As others have said, you cannot do this using pure HTML or CSS.
If you wanted to do it with PHP, you could do something like this:
Say that your div has a class called "mydiv."
This class should have
Position:absolute Height:10px Width:10px Border-radius:4px
just like you said. In addition to those, add a 1px top margin.
Your CSS should now look kinda like this:
.mydiv {
position:absolute;
height:10px;
width:10px;
border-radius:4px;
margin-top:1px;
}
To make your div repeat, put some code like the following inside your HTML where you want it to go.
<?php
for ($i = 1; $i <= 36; $i++) {
echo "<div class='mydiv'>your div</div>";
}
?>
Like I said, this uses PHP. If you've never used PHP before, then you should check if your webserver supports it. See this for a bit more info on using PHP inside HTML:
http://www.ntchosting.com/php/php-in-html.html
This code probably isn't perfect but I'm sure you'll be able to work with it.
This is not possible with absolute positioning, because as you stated with absolute positioning you must define the coordinates of the objective as it is taken out of the document flow.
You can do this with floats however. Take the following code for example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
body{
background-color:#000;
padding: 0;
margin: 0;
}
#holder{
width:15px;
margin: 30px auto;
padding: 1px 1px 0 1px;
clear: both;
}
.box{
width:10px;
height:10px;
margin-bottom: 1px;
background-color: #3F6;
float:left;
}
</style>
</head>
<body>
<div id="holder">
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>
</body>
</html>
By making the holder div less than the width of two box divs you force the next box div to appear on a newline below the previous one without giving it an exact positioning value. Then just give it a margin to add the spacing.
The only way you can do this with one div would be to create an image of what the current div looks like, with 1px of whitespace. This way, you can create a fixed width/height div that has the background of the image set to repeat. This will give the illusion you want with only one div.
Otherwise, as already stated, you will need x amount of divs to get the repetition you need. This can be easily achieved using jQuery or something similar but if you really only want one div, then the background-image may be the way to go.
Before I start, I know there are a lot of questions on here related to this, but I feel like the answers are seriously lacking. They at least aren't making sense to me, or they don't accomplish what I want. If you know of question with a solid solution that this duplicates, I simply missed it; I will delete this one.
If I have the following HTML...
<body>
<div id="header"></div>
<div id="content"></div>
</body>
How, in simple terms, can I make the header take up 50px of the view port's height and make the content portion fill the rest of the view port's height with no scrollbar? Ideally this would work in IE6 and without tables. Thanks!
this seems to work for me:
<html>
<body>
<div style="height:60px; position:fixed; width:100%;"></div>
<div style="height:100%; width:100%;">
<p style="padding-top:60px;">hola</p>
</div>
</body>
</html>
Not sure if this is what you need but it will result in #content taking up all the viewport and #header is contained within that, then any content you wanted to put in #content will appear after header.
<html>
<head>
<title>Test</title>
<style type="text/css">
body,
html {
height: 100%;
}
body {
margin: 0;
padding: 0;
}
#header {
height: 50px;
background: green;
width: 100%;
}
#content {
background: blue;
position: relative;
min-height: 100%;
height: auto !important;
height: 100%;
}
</style>
</head>
<body>
<div id="content">
<div id="header">I am the header</div>
<p>first bit of content</p>
</div>
</body>
</html>
height:auto !important; height:100%; bit is for IE 6, you'd ideally do than in a style sheet directed at IE 6 only using IE condition comments.