#logo {
position: absolute;
width:100%;
height:100%;
text-align: center;
}
#logo-img img {
float:left;
height: 4.3vw;
}
#logo-text {
float:left;
font-size:2vw;
}
<div id="logo">
<div id="logo-img">
<img src="http://revistasindromes.com/images/100x100.gif" />
</div>
<div id="logo-text">Lorem Ispum Dolores</div>
</div>
I've tried adding left:50%;right:50% but it doesn't align it horizontally right in the middle. What is the right way to horizontally align divs in my situation?
JSFiddle: http://jsfiddle.net/8s0q9cyq/
I improved Praveen's answer: https://jsfiddle.net/9mpgdqzf/
Dont use a div with an ID only to give style to an IMG. The Img can have the ID and and inherit all the attributes directly into it and your HTML becomes cleaner and lighter ;)
<div id="logo">
<img id="logo-img" src="http://revistasindromes.com/images/100x100.gif" />
<div id="logo-text">Lorem Ispum Dolores</div>
</div>
#logo {
position: absolute;
width:100%;
height:100%;
text-align: center;
}
#logo-img, #logo-text {
display: inline-block;
vertical-align: middle;
}
#logo-img {
height: 4.3vw;
}
#logo-text {
font-size:2vw;
}
Why not use text-align: center?
#logo {
position: absolute;
width: 100%;
height: 100%;
text-align: center;
}
#logo-img,
#logo-text {
display: inline-block;
vertical-align: middle;
}
#logo-img img {
display: inline-block;
height: 4.3vw;
}
#logo-text {
display: inline-block;
font-size: 2vw;
}
<div id="logo">
<div id="logo-img">
<img src="http://revistasindromes.com/images/100x100.gif" />
</div>
<div id="logo-text">Lorem Ispum Dolores</div>
</div>
#logo {
position: absolute;
width:100%;
height:100%;
text-align: center;
}
#logo-img {
display:inline-block;
}
#logo-img img {
height: 4.3vw;
}
#logo-text {
display:inline-block;
font-size:2vw;
}
<div id="logo">
<div id="logo-img">
<img src="http://revistasindromes.com/images/100x100.gif" />
</div>
<div id="logo-text">Lorem Ispum Dolores</div>
</div>
Related
So essentially I am writing a game in javascript. I have a canvas on the left, a canvas in the middle, a textarea topright, and a canvas bottom right. But I can't seem to get the right CSS code to figure out this layout like the picture. I want the middle to take up about 50-60% of the middle of the page, and the left and right columns taking the rest of the space. Would be nice if it auto resized with browser window. Any help would be appreciated.
Set a container to hold all the elements and then make smaller containers inside. Target each with CSS and set its properties.
Here I set a general CSS class .generalStyles just to simplify the code.
You would use something like this: (run the snippet)
.generalStyles
{
position:relative;
float:left;
background-color:#000;
border-radius:4px;
box-sizing:border-box;
color:#f00;
height:100px;
padding:5px;
text-align:center;
}
.container
{
width:100%;
background-color:#FFF;
}
.leftPanel
{
width:24%;
margin:0 1% 0 0;
}
.rightPanel
{
width:24%;
margin:0 0 0 1%;
background-color:#FFF;
padding:0;
}
.middlePanel
{
width:50%;
margin:0;
}
.topPanel
{
width:100%;
margin:0;
height:49.5%;
}
.bottomPanel
{
width:100%;
margin:1% 0 0 0;
height:49.5%;
}
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<div class="container generalStyles">
<div class="leftPanel generalStyles">left stuff goes here<br/>and more here<br/>and more here<br/>and more here</div>
<div class="middlePanel generalStyles">middle goes here<br/>and more here<br/>and more here<br/>and more here</div>
<div class="rightPanel generalStyles">
<div class="topPanel generalStyles">top stuff<br/>and more here</div>
<div class="bottomPanel generalStyles">bottom stuff<br/>and more here</div>
</div>
</div>
</body>
</html>
* {
box-sizing: border-box;
}
body {
margin: 0;
}
h2 {
text-align:center;
font-family:arial;
color:red;
font-weight:normal;
}
.left {
background-color: #000;
border-radius:10px;
float: left;
width: 20%;
padding: 10px;
margin:10px;
height: 300px;
}
.middle {
background-color: #000;
border-radius:10px;
float: left;
width: 60%;
padding: 10px;
margin:10px;
height: 300px;
}
.right {
float: left;
width: 20%;
margin: 10px;
height: 300px;
position: relative;
top: 0;
}
.top {
background-color: #000;
border-radius:10px;
width: 100%;
height: 47%;
padding: 10px;
}
.bottom {
background-color: #000;
border-radius:10px;
width: 100%;
height: 47%;
padding: 10px;
position: absolute;
bottom: 0;
right: 0;
}
.row {
box-sizing:border-box;
display: flex;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
<div class="row">
<div class="left">
<h2>left</h2>
</div>
<div class="middle">
<h2>middle</h2>
</div>
<div class="right">
<div class="top">
<h2>top right</h2>
</div>
<div class="bottom">
<h2>bottom right</h2>
</div>
</div>
</div>
<div class="container">
<div class="left"></div>
<div class="middle"></div>
<div class="right">
<div class="rightDiv"></div>
<div class="rightDiv"></div>
</div>
</div
and css
.container{display:block;width:100%}.left,.middle,.right{width:100px;display:inline-block}.left{border:1px solid red;height:100px}.middle{border:1px solid green;height:100px}.rightDiv{border:1px solid #ff0;height:40px;margin:10px 0}
Fiddle
I'm trying to specify content specifically somewhere on the page, How can i do this so that it'll always be in the exact same spot even when screen size changes?
jsfiddle = https://jsfiddle.net/4pkgfgwh/1/
<div class="container">
<img src="http://i.imgur.com/iGIFvH6.png" style="width:354px;height:228px;">
<div class="display">
<p> Here is some Text</p>
</div>
</div>
.container {
text-align: center;
}
.display {
position:absolute;
TOP:45px;
LEFT:350px;
}
Use position: relative on the parent container:
HTML
<div class="container">
<div class="image-container">
<img src="http://i.imgur.com/iGIFvH6.png">
<div class="display">
<p> Here is some Text</p>
</div>
</div>
</div>
CSS
.container {
width: 100%;
text-align: center;
}
.image-container {
display: inline-block;
position: relative;
width: 354px;
height: 228px;
}
.container img {
width: 100%;
}
.display {
position: absolute;
top: 10px;
left: 200px;
}
JSFiddle demo: https://jsfiddle.net/ompfnjc5/2/
I want the div which displays "D" to appear beneath that one which displays "A" so that divs with matching background colours appear stacked over one another. However, I am getting this:
Where exactly in my CSS code must I clear my float?
#container {
background-color: #333333;
width: 990px;
}
#left {
background-color: red;
width: 300px;
float: left;
}
#splitter {
background-color: green;
width: 90px;
float: left;
}
#right {
background-color: blue;
width: 200px;
float: left;
}
<div id="container">
<div id="left">A</div>
<div id="splitter">B</div>
<div id="right">C</div>
</div>
<div id="container">
<div id="left">D</div>
<div id="splitter">E</div>
<div id="right">F</div>
</div>
You have to deal with floats and for this you need to understand what floats and BFC are :
a few ways to do this, that you should understand once you been reading a bit about floats, clearing and Block formating context.
(last example in the snippet below, oldish, even avoids the floats but does the layout)
/* DEMO purpose : Show the id or class being used on that container*/
section:before {
content: attr(id)' 'attr(class);
display: table;
background: #177EE5;
padding: 5px;
margin: 5px;
color: #fff;
text-shadow: 0 0 1px black, 0 0 1px black, 0 0 1px black, 0 0 1px black, 0 0 1px black, 0 0 1px black;
letter-spacing: 1px;
font-variant: small-caps;
}
/* your css turned into class to be valid since used for many tags */
.container {
background-color: #333333;
width: 990px;
}
.left {
background-color: red;
width: 300px;
float: left;
}
.splitter {
background-color: green;
width: 90px;
float: left;
}
.right {
background-color: blue;
width: 200px;
float: left;
}
/* wrapper for each examples */
section {
clear: both;
overflow: hidden;
margin: 1em;
}
/* different ways shown, usefull for testing only if you read about floats and dig a bit */
/* table */
.table .container {
display: table;
}
/* overflow */
.overflow .container {
overflow: hidden;
}
/* float */
.float .container {
float: left;
}
/* flex */
.flex .container {
display: flex;
}
/* inline-block */
.inline-block .container {
display: inline-block;
vertical-align: top;
}
/* last examples without floats */
/*no float & ie8 */
#table div {
float: none
}
#table #first-row,
#table > div {
display: table-row;
}
#table > div > div {
display: table-cell;
}
#table {
background-color: #333333;
width: 990px;
table-layout: fixed;
}
#left {
width: 300px;
}
#splitter {
width: 90px;
}
#right {
width: 200px;
}
#table > div > div {
background-color: red;
}
#table > div > div + div {
background-color: green;
}
#table > div > div + div + div {
background-color: blue;
}
#table:before {
display: table-caption;
width: 100%;
margin: 0;
}
#table > div:after {
content: "Notice there's a gap to fill here since cols do not cover the 990px";
display: table-cell;
}
<section class="your CSS :-: no BFC involved">
<div class="container">
<div class="left">A</div>
<div class="splitter">B</div>
<div class="right">C</div>
</div>
<div class="container">
<div class="left">D</div>
<div class="splitter">E</div>
<div class="right">F</div>
</div>
</section>
<section class="table">
<div class="container">
<div class="left">A</div>
<div class="splitter">B</div>
<div class="right">C</div>
</div>
<div class="container">
<div class="left">D</div>
<div class="splitter">E</div>
<div class="right">F</div>
</div>
</section>
<section class="overflow">
<div class="container">
<div class="left">A</div>
<div class="splitter">B</div>
<div class="right">C</div>
</div>
<div class="container">
<div class="left">D</div>
<div class="splitter">E</div>
<div class="right">F</div>
</div>
</section>
<section class="float">
<div class="container">
<div class="left">A</div>
<div class="splitter">B</div>
<div class="right">C</div>
</div>
<div class="container">
<div class="left">D</div>
<div class="splitter">E</div>
<div class="right">F</div>
</div>
</section>
<section class="flex">
<div class="container">
<div class="left">A</div>
<div class="splitter">B</div>
<div class="right">C</div>
</div>
<div class="container">
<div class="left">D</div>
<div class="splitter">E</div>
<div class="right">F</div>
</div>
</section>
<section class="inline-block">
<div class="container">
<div class="left">A</div>
<div class="splitter">B</div>
<div class="right">C</div>
</div>
<div class="container">
<div class="left">D</div>
<div class="splitter">E</div>
<div class="right">F</div>
</div>
</section>
<p>another way without float including IE8 ?</p>
<section id="table" class="table">
<div id="first-row">
<div id="left">A</div>
<div id="splitter">B</div>
<div id="right">C</div>
</div>
<div>
<div>D</div>
<div>E</div>
<div>F</div>
</div>
</section>
There could be more examples from the same chunks of code and floatting children.
Clear the floats in the container.
You have 3 simple ways to do that:
1. Float
#container {
clear: both;
}
2. Overflow
#container {
overflow: hidden;
}
3. Micro clearfix hack
Link
Here is what you want done bro..
this one is by using display:inline-block https://jsfiddle.net/p4domjrb/
this one is by using float:left https://jsfiddle.net/p4domjrb/1/
.container {
background-color: #333333;
width: 990px;
display: block;
position: relative;
}
.left {
background-color: red;
width: 300px;
display: inline-block;
margin-left: -4px;
}
.splitter {
background-color: green;
width: 90px;
display: inline-block;
margin-left: -4px;
}
.right {
background-color: blue;
width: 200px;
display: inline-block;
margin-left: -4px;
}
don't use id I suggest use class isntead because idis called only once.
<style>
.container{
background-color: #333333;
width:990px;
display:block;
clear:both;
}
#left{
background-color: red;
width:300px;
float:left;
}
#splitter{
background-color: green;
width:90px;
float:left;
}
#right{
background-color: blue;
width: 200px;
float:left;
}
</style>
<body>
<div class="container">
<div id="left">A</div>
<div id="splitter">B</div>
<div id="right">C</div>
</div>
<div class="container">
<div id="left">D</div>
<div id="splitter">E</div>
<div id="right">F</div>
</div>
</body>
result is
I've got the below div structure
<div id="news">
<div id="innerNews">
<div id="newsLeft" style="width:10%; height:100%"></div>
<img id="newsThumb" src="nwes.png" width="80%" />
<div id="newsRight" style="width:10%; height:100%"></div>
</div>
</div>
#news{
width:30%;
position: relative;
}
#innerNews{
position: absolute;
width: 100%;
height: 100%;
}
How can I get #newsLeft to be aligned to the left and #newsRight to be aligned to the right of #news?
CSS Table
Because of your structure I'd recommend to use display: table; thereby you'll get equal column height. Also depending on what you are trying to do you can substitute middle column by another div and set a background to it, so you would be able to place some content in it.
#news {
display: table;
height: 150px;
}
#innerNews {
display: table-row;
}
#newsLeft, #newsThumb, #newsRight {
display: table-cell;
}
#newsLeft, #newsRight {
background-color: firebrick;
width: 11%
}
<div id="news">
<div id="innerNews">
<div id="newsLeft"></div>
<img id="newsThumb" src="http://placehold.it/350x150" />
<div id="newsRight"></div>
</div>
</div>
Floating
Another way to do that is using float: left;. There is no point to use float: right; on the third div because you have total width of three blocks equal 100%: [10%][80%][10%].
#innerNews {
height: 150px;
width: 400px;
}
#newsLeft, #newsThumb, #newsRight {
float: left;
}
#newsThumb{
width: 80%;
height: 100%;
}
#newsLeft, #newsRight {
background-color: firebrick;
width: 10%;
height: 100%;
}
<div id="news">
<div id="innerNews">
<div id="newsLeft"></div>
<img id="newsThumb" src="http://placehold.it/350x150" />
<div id="newsRight"></div>
</div>
</div>
You can remove width from ##innerNews to achieve certain effect, but again - it depends on what you want.
Position
If you'd like to stick with position
#innerNews {
height: 150px;
width: 400px;
position: relative;
}
#newsLeft, #newsThumb, #newsRight {
position: absolute;
top: 0;
}
#newsLeft {left: 0;}
#newsThumb {left: 10%;}
#newsRight {left: 90%;}
#newsThumb{
width: 80%;
height: 100%;
}
#newsLeft, #newsRight {
background-color: firebrick;
width: 10%;
height: 100%;
}
<div id="news">
<div id="innerNews">
<div id="newsLeft"></div>
<img id="newsThumb" src="http://placehold.it/350x150" />
<div id="newsRight"></div>
</div>
</div>
You can use the css float, like
#newsLeft {
float: left;
}
#newsRight {
float: right;
}
Here is how you can do it. Use position attribute as required.
#news{
width:50%;
height:200px;
position: relative;
background:#ccc;
margin-left:100px;
display:inline-block;
}
#innerNews{
position: absolute;
width: 100%;
height: 100%;
}
#newsLeft
{
position:absolute;
height:200px;
width:200px;
left:-30px;
background:#444;
display:inline-block;
width:30%; height:100%
}
#newsRight
{
position:absolute;
height:200px;
width:200px;
left:230px;
background:#444;
display:inline-block;
width:30%; height:100%
}
<div id="news">
<div id="innerNews">
<div id="newsLeft" >newsleft</div>
<img id="newsThumb" src="nwes.png" width="80%" />
<div id="newsRight" >newsright</div>
</div>
</div>
I am struggling trying to get the text to sit next to the image, its just not happening, please can some one explain what im doing wrong here? much appreciated!
.alignright {
float: right;
}
.source {
overflow: hidden;
width: auto;
height: 100%;
}
.source img {
width: 100%;
}
.margin25 {
margin:25px;
}
<!--LEFT CONTAINER DIV-->
<div style="float:left;width:40%;margin-left:2%;">
<div class="source" style="width:20%;">
<img src="http://placehold.it/150x150">
</div>
<h1 class="alignright">Recommendations?</h1>
<br />
<h2 class="margin25">main text</h2>
</div>
<!--LEFT CONTAINER DIV-->
Try using tags instead of div with display:initial in all 3 tags (img, h1, h2) and in h1 and h2 span tag set the float property to right or left.
Just corrected what was needed :
(click on full page in code snippet or else you will not see the difference with your own result)
.wrap {
width: 40%;
margin-left: 2%;
}
.alignright {
display: inline;
}
.source {
float: left;
overflow: hidden;
width: 20%;
height: 100%;
}
.source img {
width: 100%;
}
.margin25 {
margin: 25px;
display: inline;
}
<div class="wrap">
<div class="source">
<img src="../image/recomendbutton.jpg">
</div>
<h1 class="alignright">Recommendations?</h1>
<br />
<h2 class="margin25">main text</h2>
</div>
.alignright {
margin-top:-40px;
width: 77%;
float: right;
}
.source {
overflow: hidden;
width: auto;
height: 100%;
}
.source img {
width: 100%;
}
.margin25 {
margin:25px;
}
<!--LEFT CONTAINER DIV-->
<div style="float:left;width:40%;margin-left:2%;">
<div class="source" style="width:20%;">
<img src="http://placehold.it/150x150"><span>
</div>
<h1 class="alignright">Recommendations?</h1></span>
<br />
<h2 class="margin25">main text</h2>
</div>
<!--LEFT CONTAINER DIV-->