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>
Related
This question already has answers here:
Center one and right/left align other flexbox element
(11 answers)
Closed 1 year ago.
I have the following html:
<div id="box">
<div class="test1">
test1
</div>
<div class="test2">
test2
</div>
</div>
Now i want to align the div with class test1 in the center of the parent (id="box") (on main axis) and align test2 on the right of the parent. Can anyone tell me if this is possible with flex or do i need something else? The html is fixed and it can't be changed. i want to solve it with this structure.
here is a js fiddle that solves it but i need to add a 3rd div inside the parent: http://jsfiddle.net/kp1tzcry/54/
This is not what i want. Also i realy want to solve it with flex. i know i can use margin auto and float right (don't want to do that if not needed)
You can acheive this using display:block and senting position parent to relative
Here is an exemple
#box {
display: block;
position:relative;
background-color: lightgrey;
}
.test {
background-color: cornflowerblue;
width: 60px;
min-height: 100px;
}
.test1 {
margin:auto;
}
.test2 {
position: absolute;
top: 0;
bottom:0;
right: 0;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="box">
<div class="test test1">
test1
</div>
<div class="test test2">
test2
</div>
</div>
</body>
<!-- Mirrored from www.w3schools.com/css/tryit.asp?filename=trycss3_flexbox_align-self by HTTrack Website Copier/3.x [XR&CO'2014], Sun, 13 Mar 2016 11:03:00 GMT -->
</html>
Adding align-items: center to your #box will solve your issue, however, your current structure may cause issues in responsive screens.
#box {
background: #000;
color: #fff;
height: 100px;
cursor: pointer;
}
#box div {
width: 50%;
float: left;
text-align: right;
}
<div id="box">
<div class="test1">
test
</div>
<div class="test2">
test2
</div>
</div>
Edit: Use width: 50% along with float: left
I'm trying to align the layout so the images align in a row.
Here's a image of what it is currently doing
HTML
<div class="p-alignleft"></div>
<div class="p-alignright"></div>
CSS
.p-alignleft {
float: left;
margin-right:40px;
width:450px;
font-size: 1.2em;
line-height: 1.4em;
}
.p-alignright {
float: right;
width:450px;
font-size: 1.2em;
line-height: 1.4em;
}
By looking at the captured screen, I think you should enclose each person's part inside a div, and give them classes .p-alignleft or .p-alignright. After every two of them, make an empty <div class="clear"></div> with style .clear {clear:both}, so the next two persons will align at the same vertical level
HTML:
<div class="p-alignleft">Person A</div>
<div class="p-alignright">Person B</div>
<div class="clear"></div>
<div class="p-alignleft">Person C</div>
<div class="p-alignright">Person D</div>
CSS:
.p-alignleft {float:left}
.p-alignright {float:right}
.clear {clear:both}
If I understand rightly, you have a couple of options here. Instead of floating, my preference is to set each div to display: inline-block; That will make the divs line up next to each other, even if one is taller than the other:
div {
display: inline-block;
vertical-align: top;
}
A working example: http://cdpn.io/ojDEl
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style media="all">
.wrap {width: 800px;}
.wrap div {width: 48%; display: inline-block; vertical-align: top; background: #e7e7e7; margin-bottom: 20px;}
/* temp demo styles */
.wrap div {height: 200px;}
.wrap div.test {height: 300px;}
</style>
</head>
<body>
<div class="wrap">
<div>Person A</div>
<div class="test">Person B</div>
<div>Person C</div>
<div>Person D</div>
</div>
</body>
</html>
Use a container div as a row element <div class="row clearfix"><div class="media">...</div></div>
Float both elements to the left, and set clear: left on the odd ones.
Use a javascript solution to set the height to be the same. then you can leave the clear left, right, or clear all to one side.
something like this, you probably need to tweak it, it's more like pseudo code.:
var maxHeight = 0;
var items = $('.media');
// get the max height of the items
items.each(function() {
var height = parseInt($(this).outerHeight().replace('px', ''), 10);
if (maxHeight < height) {
height = maxHeight;
}
});
// assign the height to all the items
items.height(height + 'px');
I'm trying to center vertically a div inside an inline-block,
I used this inline-block to get automatically size of child in order to center my div.
The problem is my children div are floating... in order to constrain it to the left/right position.
Here is how the HTML look like :
<span class="block_container">
<div class="block_text"> <!-- float:right -->
<h1>TITLE</h1>
<p>lorem ipsum</p>
</div>
<div class="block_image"> <!-- float:left -->
<img src="test.png"></img>
</div>
</span>
However, I can't figure out this problem : http://jsfiddle.net/kl94/nH2sd/
Edit:
Here is what I want :
Here is what I tried :
http://jsfiddle.net/kl94/nH2sd/
To get the actual vertical alignment working the way you want it to work as per your attached screenshot, you have to change a few things.
1. Adding a display:table-row; to the parent block.
2. Removing all floats and replacing it with display:table-cell;
This will enforce the exact characteristic of vertical-alignment to co-exist and work the way you want it to work as per the attached screenshot.
Here is the WORKING DEMO
The HTML:
<span class="block_container">
<div class="block_image">
<img src="https://upload.wikimedia.org/wikipedia/commons/6/64/Gnu_meditate_levitate.png"></img>
</div>
<div class="block_text">
<div class="bgColor">
<h1>TITLE</h1>
<p>I should be align vertically but the problem is i don't know my left neightbor height...</p>
<div>
</div>
</span>
The CSS:
.block_text {
/*background: red;*/
/*float: right;*/
width: 60%;
display:table-cell;
vertical-align:middle;
}
.block_image {
background: yellow;
/*float: left;*/
width: 40%;
display:table-cell;
}
.block_image img {
width: 100%;
max-width: 300px;
height:auto;
}
.block_container {
background:teal;
/*display:inline-block;*/
display:table-row;
}
.bgColor{background:red;}
Hope this helps.
You could try something like this: http://codepen.io/pageaffairs/pen/LlEvs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
.block_text {
background: red;
display:inline-block;
vertical-align: middle;
}
img {
width: 40%;
max-width: 300px;
vertical-align:middle;
background: yellow;
}
.block_container {
background:teal;
display: inline-block;
}
</style>
</head>
<body>
<div class="block_container">
<img src="https://upload.wikimedia.org/wikipedia/commons/6/64/Gnu_meditate_levitate.png"><div class="block_text">
<h1>TITLE</h1>
<p>I should be align vertically but the problem is i don't know my left neightbor height...</p>
</div>
</div>
</body>
</html>
You can try to add this:
margin-top: 13%; at your .block_text selector in CSS.
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.