This question already has answers here:
CSS margin terror; Margin adds space outside parent element [duplicate]
(7 answers)
Closed 4 years ago.
I have a simple page with one main div that contains two divs (left_menu and content) and another div outside the main div that contains the footer.
The actual page appearance is the following:
As you can see, there is a white space between the footer and the other divs. My question is how to remove it.
I tried some solutions presented in other questions (as add vertical-align: top; to the footer's CSS, but it didn't work).
You can find the whole HTML and CSS code below.
<!DOCTYPE html>
<html>
<head>
<style>
html{
height:100%;
}
body{
height:100%;
width:95%;
margin:0px auto;
border: 1px solid black;
}
#main {
background-color:#f0f0f0;
height:80%;
}
#left_menu{
background-color:red;
width:25%;
height:100%;
float:left;
}
#content {
background-color:blue;
width:75%;
float:right;
height:100%;
}
#footer {
vertical-align: top;
background-color:green;
width:100%;
height:20%;
}
</style>
</head>
<body>
<div id="main">
<div id="left_menu">
<p> Something in my left menu</p>
</div>
<div id="content">
<p> Some content </p>
<br />
<p> More content </p>
</div>
</div>
<div id="footer">
<p> My footer.</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
html{
height:100%;
}
body{
height:100%;
width:95%;
margin:0px auto;
border: 1px solid black;
position:relative;
}
#main {
background-color:#f0f0f0;
height:80%;
}
#left_menu{
background-color:red;
width:25%;
height:100%;
float:left;
}
#content {
background-color:blue;
width:75%;
float:right;
height:100%;
}
#footer {
vertical-align: top;
background-color:green;
width:100%;
height:20%;
position:absolute;
bottom:0;
}
</style>
</head>
<body>
<div id="main">
<div id="left_menu">
<p> Something in my left menu</p>
</div>
<div id="content">
<p> Some content </p>
<br />
<p> More content </p>
</div>
</div>
<div id="footer">
<p> My footer.</p>
</div>
</body>
</html>
Related
I have a row split in 4 columns on a footer section, in the last column to the right I want to add something like the picture attached, but I want to preserve the look of the image and text together along all screens sizes, with what I have only works for smaller screens, and the wider the screen gets, the image and the text separate each other apart too much. How can I achieve this?
.wrapper {
position:relative;
text-align:center;
margin:0 auto;
}
.footer {
font-size:40px;
color:black;
}
.talk {
position:absolute;
text-align:left;
bottom:0;
}
.footer-logo {
vertical-align: bottom;
float:right;
height:150px !important;
}
<div class="wrapper">
<p class="footer talk">Big Text</p>
<img class="footer-logo" src='http://via.placeholder.com/140x100'>
</div>
you can simply set the display of 'image' and the 'text' element to :inline
or chage the < p > tag to < span >,
because < p > tag takes the whole line and they couldn't take place together!
but < span > tag is an inline element which takes the content width (and not the screen width)
here is a useful explanation about "display" property.
.wrapper {
display: block;
position:absolute;
right:0;
bottom:0;
text-align:center;
margin:0 auto;
}
.footer {
display: inline;
}
.talk{
font-size:40px;
color:black;
}
.logo{
height: 150px;
width: auto;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="wrapper">
<span class="footer talk">Big Text</span>
<img class="footer logo" src='http://via.placeholder.com/140x100'>
</div>
</body>
</html>
You can try This Code.
I'am add some media queries and some div to in html page
Html
<div class="wrapper">
One Columns
</div>
<div class="wrapper">
two Columns
</div>
<div class="wrapper">
three Columns
</div>
<div class="wrapper">
<div class="A">
<p class="footer talk">Big Text</p>
<img class="footer-logo" src='http://via.placeholder.com/140x100'>
</div>
</div>
CSS
.wrapper {
position:relative;
text-align:center;
margin:0 auto;
width:25%;
float:left;
}
.footer {
font-size:40px;
color:black;
}
.talk {
position:absolute;
text-align:left;
width:50%;
float:left;
}
.footer-logo {
vertical-align: bottom;
float:right;
height:150px !important;
width:50%;
float:right;
}
.A{
width:100%;
}
#media (max-width:525px){
.A{
width:100%;
}
.footer-logo {
width:20%;
float:right;
}
.talk {
width:20%;
float:left;
font-size:28px;
}
}
I want to show two divisions side by side. I have tried a few possible solutions, but they still overlap. Thank you in advance.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.sidebar
{
width:200px;
background:yellow;
color:orange;
padding:50px;
}
.content
{
width:600px;
background:silver;
color:red;
padding:50px;
}
</style>
</head>
<body>
<div class="sidebar">
This is sidebar div
</div>
<div class="content">
This is Content div
</div>
</body>
</html>
Use float:left; Learn about CSS float Property
.sidebar
{
width:150px;
background:yellow;
color:orange;
padding:50px;
float:left;
}
.content
{
width:200px;
background:silver;
color:red;
padding:50px;
float:left;
}
<div class="sidebar">
This is sidebar div
</div>
<div class="content">
This is Content div
</div>
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.sidebar
{
width:200px;
background:yellow;
color:orange;
float:left;
padding:50px;
}
.content
{
width:200px;
background:silver;
color:red;
float:left;
padding:50px;
}
</style>
</head>
<body>
<div class="sidebar">
This is sidebar div
</div>
<div class="content">
This is Content div
</div>
</body>
</html>
I think do you mean just display two div in one row is it right so it is just simple add float:left in first div it will solve your issue.
Like :
.sidebar {
width: 200px;
background: yellow;
color: orange;
padding: 50px;
float:left;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.sidebar
{
width:200px;
background:yellow;
color:orange;
padding:50px;
float:left;
}
.content
{
width:600px;
background:silver;
color:red;
padding:50px;
float:left;
margin-left:10px;
}
</style>
</head>
<body>
<div class="sidebar">
This is sidebar div
</div>
<div class="content">
This is Content div
</div>
</body>
</html>
Just added main parent to both div and used display:inline-flex to it.
.main{
display:inline-flex;
}
.sidebar
{
width:200px;
background:yellow;
color:orange;
padding:50px;
}
.content
{
width:600px;
background:silver;
color:red;
padding:50px;
}
<div class="main">
<div class="sidebar">
This is sidebar div
</div>
<div class="content">
This is Content div
</div>
</div>
adding float:left to both div will fix the issue.
css code:
.sidebar
{
width:200px;
background:yellow;
color:orange;
padding:50px;
float:left;
}
.content
{
width:600px;
background:silver;
color:red;
padding:50px;
float:left;
}
html code:
<div>
<div class="sidebar">
This is sidebar div
</div>
<div class="content">
This is Content div
</div>
</div>
and if one of your div is going down then you must adjust your div's width.
Apply a float:left to the widgets
To solve this problem :
You should add this code to .content and to .sidebar
Add float:left...
This should help
http://www.w3schools.com/cssref/pr_class_float.asp..
glad to help you
Since div is a block level element, so it will occupy 100% width of its immediate parent. Because of it, one cannot place them in a horizontal manner without making use of float - a very useful CSS property.
So in your CSS you should add the property as below, to get the desired result:
.sidebar {
float: left;
}
Watch the demo here.
To get more information about float, one can always Google, as it is an ocean of knowledge.
use CSS float Property
float: none|left|right|initial|inherit;
.sidebar {
width: 200px;
background: yellow;
color: orange;
padding: 50px;
float: left;
}
.content {
width: 200px;
background: silver;
color: red;
padding: 50px;
float: left;
}
<div class="sidebar">
This is sidebar div
</div>
<div class="content">
This is Content div
</div>
here is the code, When I resize the page size the I lost Header. I want that after page resize whole div2 should be in center. and don't do anything with width and height of div2. I've tried many options but I couldn't make it. Please help me !!!
<html>
<head>
<script></script>
<style>
body {
padding: 0;
margin: 0;
}
#div0 {
position:fixed;
opacity:1;
width: 100%;
height: 100%;
z-index:1;
background-color: Green;
}
#div1 {
padding: 5px;
position:fixed;
opacity:0.5;
width: 100%;
height: 100%;
z-index:1;
background-color: yellow;
}
#div2 {
top:0;
bottom:0;
left:0;
right:0;
margin:0 auto;
position:absolute;
width:1000px;
height:400px;
z-index:2;
background:red;
margin-top:auto;
margin-bottom:auto;
}
#header1 {
background-color:black;
color:white;
text-align:center;
padding:5px;
z-index:3;
}
#nav1 {
line-height:30px;
background-color:#eeeeee;
height:300px;
width:100px;
float:left;
padding:5px;
z-index:3;
}
#section1 {
width:350px;
float:left;
padding:10px;
z-index:3;
}
#footer1 {
background-color:black;
color:white;
clear:both;
text-align:center;
padding:5px;
z-index:3;
}
</style>
</head>
<body>
<div id="div0">
<center><h1>Karan Dayaba</h1></center>
<p>Hello I am Karan</p>
<p>Hello I am Karan</p>
<p>Hello I am Karan</p>
<p>Hello I am Karan</p>
<p>Hello I am Karan</p>
<p>Hello I am Karan</p>
<p>Hello I am Karan</p>
<p>Hello I am Karan</p>
</div>
<div id="div1"></div>
<div id="div2">
<div id="header1">
<h1>Karan</h1>
</div>
<div id="nav1">
Karan 1<br>
Karan 2<br>
Karan 3<br>
</div>
<div id="section1">
<h2>Karan 1</h2>
<p>
awdawdawadwadwadwadwad3wanul8qdy278doq2lu;dwanwdaio7wbt6adlwmdyiabnl,kwtladwua,
awdaw[moa,'0yw8njm6artbkdawadmwaln;ui;iwpeu4ofiun;omwpoauwidnuwaod.
</p>
<p>
awdoia;uwma,dwa/.wduaybnlgdr;dougnroiydgrnur;gseusgn;esugyp9ysf7n4p;f389yfs
wdawalydnuyqhduyawiadwladwadywladyaliwdawudnpawda.
</p>
</div>
<div id="footer1">
Karan Dayaba
</div>
</div>
</body>
</html>
first of all you should use width in your program so that you can use media queries .
(its a guidelines to achieve what you want its not the full code )
1. <meta name="viewport" content="width=device-width,initial-scale=1.0 ">
put the above code in your head tag.
which tells your browser the the width must be get from the device width.
2. put this in your css file and dont forget to link your css and html
#media screen and (max-width: 600px)
// change max-width size according to your requirement
{// select the tag /id/class according to your choice on
which you want to apply the change.
#header1 {
// write code that you want to implement according to
screen size of the divice
width: 100%;
text-align: center;
/*vertical-align: middle;*/
/*background: red;*/
font-size: 5px;
}
}
Hello I am trying to vertical and horizontally align 4 divs inside each other with CSS but nothing is working for me.
Please help me! Thanks in advance
My CSS Please note this is just 1 method ive tried I have been sitting here for about 2 hours messing with this and couldnt figure it out.
* {
margin:0px;
padding:0px;
}
body {
background-color:#454545;
}
.wrapper {
margin:auto;
width:960px;
}
.circle-wrapper {
height:918px;
width:918px;
background-image:url(images/overlay.png);
background-size:cover;
background-position:center center;
background-repeat:no-repeat;
position:absolute;
text-align:center;
margin:auto;
}
.outer-inner-background {
background-image:url(images/center-circle.GIF);
background-size:cover;
background-position:center center;
background-repeat:no-repeat;
position:relative;
height:494px;
width:494px;
margin:auto;
}
.outer-inner-rings {
background-image:url(images/inner-outer-rings.PNG);
background-size:cover;
background-position:center center;
position:relative;
width:494px;
height:494px;
margin:auto;
}
.inner-image {
position:relative;
height:308px;
width:308px;
margin:auto;
}
My HTML: I don't care if the structure changes it just needs to work
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Untitled Document</title>
</head>
<body>
<div class="wrapper">
<div class="circle-wrapper">
<div class="outer-inner-background">
</div>
<div class="outer-inner-rings">
</div>
<div class="inner-image">
<img class="inner-img" src="images/inside-image.PNG" width="308px" height="308px">
</div>
</div>
</div>
</body>
</html>
here my try http://dabblet.com/gist/4013306
code:
css
div {overflow:hidden}
#first {
background:red;
width:400px;
height:400px;
border-radius:300px;}
#second {
background:grey;
height:95%;
width:95%;
border-radius:300px;
margin:2.5%}
#third {
background:green;
height:70%;
width:70%;
border-radius:200px;
margin:15%;}
#forth {
background:black;
height:95%;
width:95%;
border-radius:200px;
margin:2.5%;}
html
<div id="first">
<div id="second">
<div id="third">
<div id="forth"></div>
</div>
</div>
</div>
Try using position: relative; on the container, and position: absolute; on the circles with suitable left and top values to place them in the middle.
Well, you can use absolute positioning in your inner divs where left and top positions are always set to (Parent element width - child element width /2). Here's my code
html
<div id="red">
<div id="grey">
<div id="green">
<div id="black">
</div>
</div>
</div>
</div>
CSS
div
{
border-radius:100%;
}
#red
{
position:relative;
margin-left:auto;
margin-right:auto; /** centers #red on screen **/
background-color: #F00;
width:400px;
height:400px;
}
#grey
{
background-color:#CCC;
position:absolute;
top:20px;
left:20px;
width:360px; /** 400 - 360 = 40/2 = 20px for left and top **/
height:360px;
}
#green
{
background-color:#0E0;
position:absolute;
top:40px;
left:40px;
width:280px;
height:280px;
}
#black
{
background-color:#000;
position:absolute;
left:20px;
top:20px;
width:240px;
height:240px;
}
Here's the fiddle:
http://jsfiddle.net/brunovieira/pmN4z/
Fiddle with #red centered on screen:
http://jsfiddle.net/brunovieira/pmN4z/2/
Does it need to be 4 divs? try this:
http://jsfiddle.net/vSyWZ/2/
HTML
<div class="outer">
<div class="inner"><div>
</div>
CSS
div{position:relative; margin:0 auto;}
.outer{width: 350px; height: 350px; background-color: gray; border-radius: 100%; border:10px solid red; vertical-align: middle;}
.inner{width: 200px; height: 200px; background-color: black; border-radius: 100%; border:10px solid green; top:60px;}
I tested on Chrome and Firefox and works fine, IE doesn't have support for rounded corners but it is centered.
I have a website in which the layout look something like the following:
The css for the main content is as follows:
.home {margin:178px 0 0 100px;width:800px;padding:0 10px 0px 10px;float:left;height:auto!important;height:310px;min-height:310px;}
The problem is whenver I resize the browser, the main content div instead of staying there and the browser getting horizontal scrollbars
moves down automatically.
If I resize the browser back to its original size, the main div doesn't even come back to its original place. How do I correct this thing?
Add the two elements (left,right) inside a container div, and give this container a min-width
<head>
<style type="text/css">
body {
min-width:750px;
min-height:500px;
}
div.container {
min-width:600px;
min-height:450px;
}
div.left, div.right {
min-height:400px;
}
</style>
</head>
<body>
<div class="header"></div>
<div class="container">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="footer"></div>
</body>
This is two column full screen layout with colorized column background (if necessary) & jsfiddle:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html,body {
margin:0;
padding:0;
height:100%;
background-color:#ccc;
}
#header {
background-color:#ccf;
}
#container {
position:relative;
min-height:80%;
border:4px solid red;
overflow:hidden;
}
#left {
float:left;
width:200px;
background-color:#cfc;
padding-bottom:9999px;
margin-bottom:-9999px;
}
#main {
position:relative;
margin-left:200px;
background-color:#ffc;
padding-bottom:9999px;
margin-bottom:-9999px;
}
#footer {
background-color:#fcc;
}
</style>
</head>
<body>
<div id="header">HEADER</div>
<div id="container">
<div id="left">LEFT</div>
<div id="main">MAIN</div>
<div style="clear:both"></div>
</div>
<div id="footer">FOOTER</div>
</body>
</html>