I want to have two div boxes one at left and another at right corner.
With the help off following code it comes but both are not in same align.
It comes one after another.
Here is my code
<style>
html { margin:0; padding:0; font-size:62.5%; }
body { max-width:300px; font-size:14px; font-size:1.4em; }
h1 { font-size:1.8em; }
.demo { overflow:auto; border:1px solid silver; min-height:100px;min-width: 200px;float: left }
.demo1 { overflow:auto; border:1px solid silver; min-height:100px;min-width: 200px; float: right}
</style>
<link rel="stylesheet" href="style.min.css" />
</head>
<body><div id="frmt" class="demo"></div>
<div id="frmt1" class="demo1"></div>
</body>
So it comes like
and I want it to look like
It's because of max-width: 300px; in you body. Removing that would do the trick.
demo and demo1 are having a min-width of 200px each, summing to 400px. But the body have a max-width of only 300px.
<head>
<style>
html {
margin: 0;
padding: 0;
font-size: 62.5%;
}
body {
font-size: 14px;
font-size: 1.4em;
}
h1 {
font-size: 1.8em;
}
.demo {
overflow: auto;
border: 1px solid silver;
min-height: 100px;
min-width: 200px;
float: left
}
.demo1 {
overflow: auto;
border: 1px solid silver;
min-height: 100px;
min-width: 200px;
float: right
}
</style>
<link rel="stylesheet" href="style.min.css" />
</head>
<body>
<div id="frmt" class="demo"></div>
<div id="frmt1" class="demo1"></div>
</body>
Flex is becoming more and more common place and means you don't have to have your boxes so far apart
.demo-container {
display: flex;
align-items: center;
}
.demo {
overflow: auto;
border: 1px solid silver;
min-height: 100px;
min-width: 200px;
}
.demo-button {
height: 25px;
margin: 20px;
}
<div class="demo-container">
<div id="frmt" class="demo"></div>
<button class="demo-button">>></button>
<div id="frmt1" class="demo"></div>
</div>
I know your question had already been answered, but there is always more than one way to solve a problem :-)
Try this
<body><div id="frmt" class="demo" style="float:left;"></div>
<div id="frmt1" class="demo1" style="float:right;"></div>
</body>
Related
This question already has answers here:
Two divs side by side - Fluid display [duplicate]
(9 answers)
Closed 5 years ago.
Hi I have the below HTML, Inside the Container I have Header, section and div.
With my current CSS below the div with class rightSideDiv does not show to right to the section element.
.container {
height: 500px;
widht: 500px;
background-color: red;
}
.headerTitle {
display: inline-block;
height: 24px;
margin: 24px 24px 0;
padding: 0;
line-height: 24px;
}
.sectionClass {
width:249px;
height:200px;
background-color: yellow;
}
.rightSideDiv {
width:249px;
height:200px;
border: 4px solid green;
}
<aside>
<div class="container">
<header class="headerTitle"> Header Title </header>
<section class="sectionClass"> . </section>
<div class="rightSideDiv"> </div>
</div>
</aside>
The section and div should be shown side by side. I dont want to modify the current HTML structure. I have tried specifying float:left or right but both doesn't seem to work.
Apply float: left; to both containers, use width: 50%; instead of px and display: block; header
.container {
height: 500px;
width: 500px;
background-color: red;
}
.headerTitle {
display: block;
height: 24px;
margin: 24px 24px 0;
padding: 0;
line-height: 24px;
}
.sectionClass {
width:50%;
height:200px;
background-color: yellow;
float: left;
}
.rightSideDiv {
width:50%;
height:200px;
background-color: pink;
float: left;
}
<aside>
<div class="container">
<header class="headerTitle"> Header Title </header>
<section class="sectionClass"> . </section>
<div class="rightSideDiv"> </div>
</div>
</aside>
Change the H2 to display: block;, and then add float:left; to both boxes.
When you want divs side-by-side through floating, float them the same direction.
rightSideDiv is 8 pixels taller than the other. That is because the 4px border is added on top of the height. Consider using box-sizing: border-box;, which makes the border get absorbed into the set height, instead of being added on top of it.
.container {
height: 500px;
width: 600px;
background-color: red;
}
.headerTitle {
display: block;
height: 24px;
margin: 24px 24px 0;
padding: 0;
line-height: 24px;
}
.sectionClass {
width:249px;
height:200px;
background-color: yellow;
display: inline-block;
float: left;
}
.rightSideDiv {
width:249px;
height:200px;
border: 4px solid green;
display: inline-block;
float: left;
}
<aside>
<div class="container">
<header class="headerTitle"> Header Title </header>
<section class="sectionClass"> . </section>
<div class="rightSideDiv"> </div>
</div>
</aside>
Try using flexbox and display:flex instead. With very few changes to css you can get something like this: https://jsfiddle.net/vnuz47va/2/
.container {
height: 500px;
width: 520px;
background-color: red;
display:flex;
flex-wrap:wrap;
justify-content:space-between;
}
.headerTitle {
display: inline-block;
height: 24px;
margin: 24px 24px 0;
padding: 0;
line-height: 24px;
width:100%;
}
.sectionClass {
width:249px;
height:200px;
background-color: yellow;
}
.rightSideDiv {
width:249px;
height:200px;
border: 4px solid green;
}
<aside>
<div class="container">
<header class="headerTitle"> Header Title </header>
<section class="sectionClass"> . </section>
<div class="rightSideDiv"> </div>
</div>
</aside>
change your css with this :
.container {
height: 500px;
width: 500px;
background-color: red;
}
.headerTitle {
height: 24px;
margin: 24px 24px 0;
padding: 0;
line-height: 24px;
}
.sectionClass {
float : left;
width: 50%;
height:200px;
background-color: yellow;
}
.rightSideDiv {
float : right;
width:50%;
height:200px;
border: 4px solid green;
}
you can use float right and left to align your div, however your container has a width to 400 and your 2 div are 249+249 = 498 so there is a problem here..
I'm learning css and html and i have this problem, where the margin-left and margin-right in the ".logo" div class don't want to center the div. Please help because i done reserch, i checked the code and everything looks good, so I have no idea whats going on.
body
{
background-color: #303030;
color: #ffffff;
}
.wrapper
{
width:100%;
}
.header
{
width:100px;
padding:40px 0;
}
.logo
{
width:450px;
font-size:48px;
border: 1px solid white;
margin-left: auto;
margin-right: auto;
}
<html lang="pl">
<head>
<meta charset="utf-8"/>
<title>site</title>
<link rel="stylesheet" href="style.css" type="text/css"/>
</head>
<body>
<div class="wrapper">
<div class="header">
<div class="logo">
LOGO
</div>
</div>
</div>
</body>
</html>
Your header is only 100px while your logo is 450px, you can check this fiddle for demo.
.wrapper {
width: 100%;
}
.header {
width: 1000px;
padding: 40px 0;
}
.logo {
width: 450px;
font-size: 48px;
border: 1px solid white;
margin-left: auto;
margin-right: auto;
}
I'm trying to learn css and html to do something, but isn't working.
I'm trying to do something like this:
But this is what i'm getting:
My code:
#agenda1 { width: 350px; height: 50px; background-color: white; } #agenda2{ height: 23px; background-color: #bf1a17; border-radius: 10px; margin-top: 10px; width: 60; } #textoagenda{ text-align: center; }
<div id="agenda1"> <div id="agenda2" float="left"> <div id="textoagenda"> 26/25 </div </div> </div>
Just wrap the numbers in an element and make it inline-block so that it will display inline with the text but you can apply vertical padding, border-radius for rounded corners, padding as you see fit, a background-color, and vertical-align so it will align properly with the text beside it.
span {
background: #c00011;
border-radius: .75em;
padding: .25em .5em;
vertical-align: baseline;
display: inline-block;
}
<span>26/25</span> TESTTESTASDFASDF
add margin property your main div.
#agenda1 { width: 350px;
height: 50px;
background-color: white;
margin:auto; }
#agenda2{ height: 23px;
background-color: #bf1a17;
border-radius: 10px;
margin-top: 10px;
width: 60; }
#textoagenda{
text-align: center; }
<div id="agenda1"> <div id="agenda2" float="left"> <div id="textoagenda"> 26/25 </div </div> </div>
Here you go, try this
<html>
<head>
<style>
#box1{
position:relative;
float:left;
width: 100px;
height: 100px;
background-color: green;
}
#box2{
position:relative;
float:left;
width: 100px;
height: 100px;
background-color: blue;
}
</style>
</head>
<body>
<div id="box1">contents</div>
<div id="box2">contenst</div>
</body>
</html>
I can't figure out how to stop the #body div from overlapping with the #leftnav div.
Trying to set up the page layout. Also if you have any other recommendations for what I have so far that would be appreciated!
html {
background-color: light-grey;
}
#container {
width: 900px;
margin: auto;
}
#header {
width: 900px;
font-family: 'Emblema+One', 'arial',sans-serif;
font-size: 4em;
text-align:center;
}
a {
color: #000;
}
a:hover {
color: red;
}
a:visited {
color: purple;
}
.nav {
width: 900px;
border:1px solid #000;
border-width:1px 0;
list-style: none;
margin:0;
padding:0;
text-align:center;
}
.nav li {
display: inline;
}
.nav a {
display: inline-block;
padding: 0 15px;
text-decoration:none;
}
#leftnav {
border-left: 1px solid black;
border-right: 1px dotted black;
float: left;
width: 140px;
height: 400px;
}
#rightnav {
border-left: 1px dotted black;
border-right: 1px solid black;
float: right;
width: 140px;
height: 400px;
}
#body {
background-color: grey;
border: 1px solid black;
width: 620px;
height: 400px;
}
#footer {
clear: both;
border: 1px solid black;
width: 900px;
height: 100px;
}
EDIT: Added HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>Cupcakes</title>
<link rel="stylesheet" style="text/css" href="style.css">
<link href='http://fonts.googleapis.com/css?family=Emblema+One' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="container">
<h1 id="header">Cupcakes</h1>
<ul class="nav">
<li>Home</li>
<li>About</li>
<li>Creations</li>
<li>Contact</li>
</ul>
<div id="leftnav"></div>
<div id="rightnav"></div>
<div id="body"></div>
<div id="footer"></div>
</div>
</body>
</html>
As I said in the comment it's a problem with the Floats and Clear property, you need to clear in the #body is the element after the floats who needs to clear:
#body {
clear:both;
}
Check the Demo
Edit
My mistake when I've looked more closer into your code I see you are trying to get the #body between the floated elements. If you want to keep working that way you can:
Assign a margin-left equal to the height of the left navbar:
#body {
margin-left:140px;
}
It ends like This http://jsfiddle.net/tbHF9/1/
Or you can let the #body take that space with width:100% the content will respect the space of the floated elements:
#body {
width:100%;
}
It ends like this http://jsfiddle.net/tbHF9/2/
You're not clearing your floats properly. I'd strongly recommend checking out this article http://css-tricks.com/snippets/css/clear-fix/. Using the CSS from this article, wrap your floating elements in a div with the 'clearfix' or 'group' class.
I'm having difficulty achieving this. I would like the div content1 and content2 to fill up the remaining space vertically in a window with a set minimum height.
<style type="text/css">
body,td,th {
font-family: Arial, Helvetica, sans-serif;
height:100%;
}
body {
background-color: #E1E1E1;
}
</style>
<style type="text/css">
.container {
width: 965px;
height: 100%;
margin: 0 auto;
overflow: hidden;
}
.sidebar1 {
float: left;
width: 200px;
background: none;
padding-bottom: 10px;
} .content {
padding: 10px 0;
width: 380px;
height: 100%;
background: #fff;
float: left;
position: relative;
} .content2 {
float: left;
width: 380px;
height: 100%;
background: #fff;
padding: 10px 0;
}
-->
</style>
Here are the divs I'm trying to resize (currently empty but I would like them to fill up the window vertically):
<div class="content" style="border-left: solid 1px #CCC;"></div>
<div class="content2"><!-- end .sidebar2 --></div>
You need 100% height on the html tag as well
html { height: 100%; }
See: http://jsfiddle.net/wJ73v/
<!DOCTYPE html>
<html>
<head>
<title>Foo</title>
<style>
html {height: 100%;}
body {height: 100%; margin: 0; padding: 0;}
div {border: 1px solid #000; height: 100%; float: left;}
</style>
</head>
<body>
<div id="foo">a</div>
<div id="bar">b</div>
</body>
</html>
Proper DOCTYPE is necessary, I think, since otherwise browsers go to so called quirks mode.