I can't properly float divs - 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)

Related

Aligning two elements to the bottom inside a column

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 find a css that div automatically occupy the rest of the horizontal dimension

If you have two child divs in the parent div, and one of the child divs occupies the width of a particular value, i want to find a css that the other child div automatically occupy the rest of the horizontal dimension.
* {
margin:0;
padding:0;
}
a {
text-decoration:none;
}
li {
list-style:none;
}
img {
height:100%;
border:0;
}
body,html {
width:100%;
height:100%;
}
body {
background-color:#161716;
padding:2%;
box-sizing:border-box;
}
#container {
width:100%;
height:100%;
background-color:aquamarine;
display:flex;
flex-flow:row wrap;
align-items:center;
justify-content:space-between;
}
#scroll {
width:2%;
height:20%;
margin-right:1%;
background-color:burlywood;
}
#container_in {
width: calc(100% - 26%);
height:100%;
margin-left:1%;
margin-right:1%;
background-color:deepskyblue;
}
#side {
width:20%;
height:100%;
margin-left:1%;
background-color:bisque;
}
#header {
width:100%;
height:15%;
}
header {
display:table;
width:100%;
height:100%;
background-color:darkviolet;
}
#logo {
width:fit-content;
height:100%;
background-color:azure;
}
#logo a {
width:fit-content;
height:100%;
}
#navi {
display:table-cell;
width:auto;
height:100%;
background-color:navajowhite;
}
<!doctype html>
<html>
<head>
<title>Untitled</title>
<link href="css/index.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="container">
<div id="scroll">
</div> <!-- scroll end -->
<div id="container_in">
<div id="header">
<header>
<div id="logo">
<a href="#">
<img src="img/logo.jpg">
</a>
</div> <!-- logo end -->
<div id="navi">
<nav>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</nav>
</div> <!-- navi end -->
</header>
</div> <!-- header end -->
</div> <!-- container_in end -->
<div id="side">
</div> <!-- side end -->
</div> <!-- container end -->
</body>
</html>
Once the entire structure is like the code above.
My question is the div#header section.
The div#header header is a child element of the div#header.
The div#header header contains two child div.
The parent area(div#header header) contains #logo and #navi.
The width of the #logo area is given as width: fit-content; to match the image size of the #logo child area.
Then the other child #navi can not use the same method as width: calc (100% - 10px) without knowing the width value of the #logo child.
I would like to use css only so that the rest of the #logo area in the div # header header area is automatically occupied by #navi.

Make it simple with flex property
add flex:1 to the div you want to give all the remaining space
#container_in{
flex:1;
}
Minimal coded working snippet here:
#container{
display: flex;
align-items: center;
text-align: center;
}
#container div{
padding: 5px 10px;
}
#container_in{
flex:1;
background: blue;
}
#scroll{
background: red;
}
#side{
background: green;
}
<div id="container">
<div id="scroll">scroll</div>
<div id="container_in">It will occupy remaining space</div>
<div id="side"> side</div>
</div>
Working Demo here

How to get a div to extend out of a bootstrap container to the right side of the page?

I would like to get a div within a container to extend to the edge of the page.
As you can see in my fiddle I have managed to do this, however the red 'bar' goes off the page so the user is able to scroll to the right.
I would like it to function how it does now but with the red div touching the side of the page and going no further.
Things to keep in mind:
I am trying to keep it pure HTML/CSS for now,
The code must be responsive,
This will also be used in a CMS so any length of text could be added.
.container{
background-color:grey;
}
.row{
padding-top:30px;
padding-bottom:40px;
}
.row_outer{
height:50px;
background-color:blue;
display: block;
float:right;
clear:both;
}
.text{
display: inline-block;
}
.holder{
width: 0px;
float:right;
height: 100%;
}
.bar{
height: 50px;
background-color:red;
position:absolute;
display:block;
width:100%;
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="row_outer">
<div class="text">Test Text 78oo76o689o 76o 68k yuk uik</div><div class="holder"><div class="bar">
</div></div>
</div>
</div>
</div>
Thank-you.

Div's height gets extended as soon as an image is added

Spent 2 days fighting with this: http://jsfiddle.net/DQFja/537/
Basically have a parent div called "table" and 2 cells in it. One cell has sub-div, another cell has an image. Image is not displayed on the top left side of the div as I would've expected. This can be fixed by removing "height" attribute from the sub-div but I need it (the div is used for background and cell1 is also used for background).
<div id="table">
<div id="cell1">
<div id="sub-cell1">
</div>
</div>
<div id="cell2">
<img src="https://www.google.ru/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" height="20"/>
</div>
</div>
#table
{
display:table;
height:103px;
}
#cell1, #cell2
{
display:table-cell;
}
#cell1
{
width:50%;
height:103px;
background-color:green;
}
#sub-cell1
{
width:100%;
height:103px;
display:inline-block;
}
#cell2
{
width:1000px;
height:103px;
background-color:red;
}
Could anybody explain me why the image is not positioned on the top left side in the second div here? It works as expected if image is removed or if the sub-div is removed or if "height" attribute of the sub-div is removed.

table behave in such way to center elements vertically
The solutions might be
1) you can add vertical-align: top; to the cell
2) use absolute positioning for the image
#cell2
{
width:1000px;
height:103px;
background-color:red;
vertical-align: top;
}
http://jsfiddle.net/DQFja/539/

Try the following:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.table {
display: table;
width: 100%;
}
.tableRow {
display: table-row;
}
.tableCell {
display: table-cell;
height: 103px;
}
.tableCell:first-child {
background-color: green;
width: 50%;
}
.tableCell:last-child {
background-color: red;
}
img {
height: 20px;
}
</style>
</head>
<body>
<div class="table">
<div class="tableRow">
<div class="tableCell">
<div class="subDiv">
</div>
</div>
<div class="tableCell">
<img src="https://www.google.ru/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" alt="" />
</div>
</div>
</div>
</body>
</html>
https://jsfiddle.net/8r262g29/

How to display two divs together in html?

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>