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;
}
}
Related
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 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;
}
}
Good day! I did some reasearch and I read here difference between css height : 100% vs height : auto
that height-auto should take the minimum amount of space depending on the children's width.
In my case, the property behaves like width 100%, taking 100% of it's parent's width
Here is the code:
<!DOCTYPE html>
<html>
<head>
<style>
.header2 {
float:left;
width:900px;
height:23px;
background:red;
}
.buttonHolder {
margin: 0 auto;
width:auto;
height:24px;
background:black;
}
.button {
width:50px;
height:24px;
background:blue;
float:left;
}
</style>
</head>
<body>
<div class="header2">
<div class="buttonHolder">
<div class="button"></div> <div class="button"></div> <div class="button"></div>
</div>
</div>
</body>
The question is: Where is my error?
.header2 {
float:left;
width:900px;
height:23px;
background:red;
text-align: center;
}
.buttonHolder {
display: inline-block;
height:24px;
background:black;
}
this should work.
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.