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>
Related
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>
So I have to make an template of website which should look like
that
But I have problem with floating div's. I have to make like three div's
1: "global" div which is called 1 on upper picture that I linked
2: it's just an menu
3: is div which should display some text by clicking on menu articles
For now,my template looks like that. How I may set those two div's (red, and yellow one) in same line?
body {
background-color: green;
}
#baner {
background-color: black;
height: 500px;
width: 100%;
}
#menu {
background-color: red;
width: 40%;
height: 30%;
}
#zawartosc {
background-color: yellow;
width: 60%;
height: 70px;
float: right;
}
<div id="baner">
<img src="baner.jpg" width="30%" height="60%" />
<div id="menu">
MENU</br>
Opis</br>
Jaka to liczba?</br>
Liczby całkowite z wykresu
</div>
<div id="zawartosc">asd</div>
</div>
I suggest a parent div.
body{
background-color:green;
}
#baner{
background-color:black;
height:500px;
width:100%;
}
.bottom{
width:100%;
position:relatvie;
}
#menu{
background-color:red;
width:40%;
height:30%;
float:left;
}
#zawartosc{
background-color:yellow;
width:60%;
height:70px;
float:left;
}
<!DOCTYPE HTML>
<html>
<body>
<div id="baner">
<img src = "baner.jpg" width="30%" height="60%"/>
<div class="bottom">
<div id="menu">
MENU</br>
Opis</br>
Jaka to liczba?</br>
Liczby całkowite z wykresu
</div>
<div id="zawartosc">asd</div>
</div>
</div>
</body>
</html>
.main{
width:100%;
height:100px;
background-color:black;
color:white;
text-align:center;
}
.left{
width:50%;
height:50px;
background-color:green;
float:left;text-align:center;
}
.right{
width:50%;
height:50px;
background-color:red;
float:left;
text-align:center;
}
<div class="main">hello</div>
<div class="left">green</div>
<div class="right">red</div>
for next div you should clear the floats using clear:both
If you just float #zawartosc then it will start new line because before this there is a block level element (#menu) which will take whole available width. So you have to float both #menu and #zawartosc div if you want both in same line. Notice that img element is inline element. so if you dont use a wrapper of floating element then you have to set img element to display block
body{
background-color:green;
}
#baner{
background-color:black;
height:500px;
width:100%;
}
#menu{
background-color:red;
width:40%;
height:30%;
}
#zawartosc{
background-color:yellow;
width:60%;
height:70px;
}
#menu,#zawartosc {
float:left;
}
img {
display:block;
}
<!DOCTYPE HTML>
<html>
<head>
<link rel="Stylesheet" type="text/css" href="test.css"/>
</head>
<body>
<div id = "baner">
<img src = "baner.jpg" width="30%" height="60%"/>
<div id = "menu">
MENU</br>
Opis</br>
Jaka to lic
zba?</br>
Liczby całkowite z wykresu
</div>
<div id = "zawartosc">asd</div>
</div>
</body>
</html>
If use a wrapper div then you don't set img element to display block. Like this
body{
background-color:green;
}
#baner{
background-color:black;
height:500px;
width:100%;
}
#menu{
background-color:red;
width:40%;
height:30%;
}
#zawartosc{
background-color:yellow;
width:60%;
height:70px;
}
#menu,#zawartosc {
float:left;
}
<!DOCTYPE HTML>
<html>
<head>
<link rel="Stylesheet" type="text/css" href="test.css"/>
</head>
<body>
<div id = "baner">
<img src = "baner.jpg" width="30%" height="60%"/>
<div class = 'wrapper'>
<div id = "menu">
MENU</br>
Opis</br>
Jaka to lic
zba?</br>
Liczby całkowite z wykresu
</div>
<div id = "zawartosc">asd</div>
</div>
</div>
</body>
</html>
Hope this will help you.
Css has moved on from using floats to position things to the left and right (plus floats were only ever designed to be used for positioning images within text but where abused for a lack of a better way to position things)
Instead of floating your divs, I would use flexbox - this also has the added benefit that your left and right divs will become equal height:
body {
background-color: green;
}
#baner {
background-color: black;
height: 500px;
width: 100%;
display:flex; /* this is optional, but I added it to make the container below fill the vertical space */
flex-direction:column; /* aligns children in a column */
}
.container {
display:flex; /* add this so menu and zawartosc are aligned in a row - default flex direction is row */
flex-grow:1; /* this just says fill the resat of the space - in this case the vertical space of baner */
}
#menu {
background-color: red;
width: 40%; /* this can be a fixed width if you want - menus don't usually grow in size so best to make the content column fluid rather than both content and menu */
}
#zawartosc {
background-color: yellow;
flex-grow: 1; /* make this grow to fill the rest of the row */
}
<div id="baner">
<img src="baner.jpg" width="30%" height="60%" />
<div class="container"> <!-- wrap below divs in a container -->
<div id="menu">
MENU</br>
Opis</br>
Jaka to liczba?</br>
Liczby całkowite z wykresu
</div>
<div id="zawartosc">asd</div>
</div>
</div>
More information about flexbox
Useful Flexbox playground Codepen
If you want to continue using floats, then you either have to float the menu left, or move zawartosc before menu in your html - but don't forget to clear your floats too (probably why you have added a fixed height to baner)
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;
}
}
Salam (means hello) :)
I have the following simple layout, the problem is that adding content to right div makes content on left one come down:
JS Fiddle
<!DOCTYPE html>
<html>
<head>
<style>
.parent{
width:800px;
height:100px;
display: inline-table;
border: 1px solid #e8e8e8;
background: #fcfcfc;
}
.parent .right{
width:90px;
display:table-cell;
padding-top: 10px;
text-align: center;
background: #f5f5f5;
color:#666666;
}
.parent .left{
width:710px;
display:table-cell;
padding-top: 0px;
}
</style>
</head>
<body>
<div class="parent">
<div class="left">
This cell has padding-top:0px
</div>
<div class="right">
<img src="images/icon.png">
<br>some text
</div>
</div>
</body>
</html>
Since you have this property display:table-cell the content inside is been vertical aligned, for default with baseline , see more here.
You can replace this value with top or middle:
.left, .right {
vertical-align:middle;
}
The demo http://jsfiddle.net/Svdm4/2/
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>