<style>
#middle .institutions
{
width:100%;
display:table;
}
#middle .institutions .institution
{
width:100%;
display:table-row;
}
#middle .institutions .institution .institution-image
{
display:table-cell;
width:50%;
}
#middle .institutions .institution .degree
{
display:table-cell;
width:50%;
}
</style>
<body>
<div id="middle">
<div class="institutions">
<div class="institution">
<div class="institution-image">
<img src="jntuk.png" ></img>
</div>
<div class="degree">
<p class="name">Rochester Institute of Technology</p>
<p>Master's - Information Technology</p>
<p>GPA:3.50</>
www.rit.edu
</div>
</div>
</div>
</body>
i dont want to use floats for some reason. can some help me
link for screenshot-https://drive.google.com/file/d/0B4FKXRWc2y_CTFRZQUhWZk9oUVU/view?usp=sharing
You can fix this by adding: vertical-align: top;
#middle .institutions .institution .degree {
display:table-cell;
vertical-align: top;
width:50%;
}
Here's a link to a fiddle:
http://jsfiddle.net/ayxg0x8j/
Related
Imagine a page with the basic structure as below. The main question is how do I get the .left background to extend all the way to the left side of the window, and the .right to extend to the right side? Both need to remain fixed width.
HTML:
<body>
<div class="container">
<header>blah</header>
<article>doodle doo</article>
<div class="left">Left stuff with blue background</div>
<div class="right">Right stuff with red background</div>
<div class="clear"></div>
</div>
<footer>deedle dee</footer>
</body>
CSS:
.container{
width:400px;
margin:0 auto;
}
header{
background-color:grey;
}
.left{
width:200px;
float:left;
background-color:blue;
}
.right{
width:200px;
float:right;
background-color:red;
}
.clear{
clear:both;
}
footer{
background-color:#DDD;
text-align:center;
}
Fiddle here
The basic idea is the same as this page, but you might notice that the page scrolls a loooong way to the right - the cut off doesn't actually work.
I have achieved this with display: table and pseudo elements.
The basics of this solution:
The wrapper .content is made display: table and given position: fixed to allow its "cells" to have your fixed width. Provide spacing ,if required, with border-spacing: unit size;
.left and .right are given display: table-cell
.content:before and .content:after provide pseudo columns (also with display: table-cell) to space out the background.
Have an example!
HTML
<header></header>
<article></article>
<div class="content">
<div class="column left"></div>
<div class="column right"></div>
</div>
<footer></footer>
CSS
* {
margin:0;
padding:0
}
html,body {
height:100%
}
.content {
display:table;
table-layout:fixed;
height:100%;
width:100%
}
header {
background-color:grey;
height:20px;
width:500px;
margin:0 auto
}
article {
height:20px;
width:500px;
margin:0 auto
}
.column {
display:table-cell;
width:200px;
vertical-align: top
}
.left {
height:100%;
background:blue
}
.content:before,.content:after {
display:table-cell;
content:'';
background:blue;
height:100%;
vertical-align: top;
padding-left:10%
}
.content:after {
background:red;
padding-right:10%
}
.right {
background-color:red
}
footer {
background-color:#DDD;
text-align:center;
height:50px
}
1) Put your left and right elements into another container:
<div class="container">
<header>blah</header>
<article>doodle doo</article>
</div>
<div class="container2">
<div class="left">
<div class="text">Left stuff with blue background</div>
<div class="clear"></div>
</div>
<div class="right">
<div class="text">Right stuff with red background</div>
<div class="clear"></div>
</div>
</div>
<footer>deedle dee</footer>
2) The container2 width is 100%, let the left and right to be 50%:
.left {
width:50%;
float:left;
background-color:blue;
}
.right {
width:50%;
float:right;
background-color:red;
}
3) The text element on your both columns, should be 200px:
.text {
width: 200px;
}
.left .text {
float: right;
}
.right .text {
float: left;
}
Working jsFiddle Demo.
So I want to align these three elemts so they are side by side on the page, first the '1' follow by the image follow by the 'text'. I cannot work out at all how to do this can somebody help?
My HTML:
<div class="chart-game">
<div id="1">
<h1>1</h1>
</div>
<div id="1img">
<img src="http://images.pushsquare.com/games/ps3/call_of_duty_ghosts/cover_large.jpg">
</div>
<div id="1p">
<p>Text</p>
</div>
</div>
My CSS:
.chart-game img {
width:100px;
height:100px;
}
#1 {
display:inline-block;
margin-right:10px;
}
#1img {
display:inline-block;
margin-right:10px;
}
#1p {
display:inline-block;
}
Any help would be greatly appreciated, thank you.
Try this:
html:
<div class="chart-game">
<div class="chart-game-inner">
<h1>1</h1>
</div>
<div class="chart-game-inner">
<img src="http://images.pushsquare.com/games/ps3/call_of_duty_ghosts/cover_large.jpg" />
</div>
<div class="chart-game-inner">
<p>Text</p>
</div>
</div>
css:
.chart-game img {
width:100px;
height:100px;
}
.chart-game-inner {
display : inline-block;
}
Change the names of the Id to not contains any numbers at the beginning of the string.
The code is working fine
New HTML
<div class="chart-game">
<div id="header">
<h1>1</h1>
</div>
<div id="image">
</div>
<div id="text-header">
<p>Text</p>
</div>
</div>
And the CSS
.chart-game img {
width:100px;
height:100px;
}
#header {
display:inline-block;
margin-right:10px;
}
#image {
width: 50px;
height:50px;
background : #dedede;
display:inline-block;
margin-right:10px;
}
#text-header {
display:inline-block;
}
You have to use floats
css
.chart-game img {
width:100px;
height:100px;
float:left;
}
#1 {
display:inline-block;
margin-right:10px;
}
#1img {
display:inline-block;
margin-right:10px;
float:left;
}
#1p {
display:inline-block;
}
h1{
float:left;
}
p{
float:left;
}
Additional class identifiers are allowed to start with a number, but ID identifiers are not.
fiddle
I am creating a code for my web programming class. I'm having troubles having my DIV tags to line up. I'm needing them to be equal, and no matter what I do I can't get them to work. The .black and .grey are the same part, and I'm not sure how to make it so they are even.
.css
.main {
background-color:#e3e2e2;
margin-bottom:1em;
padding:10px;
margin-left:auto;
margin-right:auto;
text-align:center;
margin:93%;
border-radius:20px;
float:left;
margin:20px;
}
.bg1 {
background-color:#d2cdc8;
border-top-left-radius:20px;
border-bottom-left-radius:20px;
width:65%;
float:left;
}
.bg2 {
background-color:#a79f97;
border-top-right-radius:20px;
width:35%;
float:right;
}
.bg3 {
background-color:#a79f97;
border-bottom-right-radius:20px;
width:35%;
float:right;
}
.black {
background-color:#3e3831;
margin-left:10px;
margin-right:10px;
text-align:center;
width:92%;
border-top-left-radius:20px;
border-top-right-radius:20px;
float:right;
margin-top:20px;
margin-right:20px;
margin-left:20px;
color:#d6d3c6;
font-family: TF2Build;
}
.grey {
background-color:#514840;
margin-left:10px;
margin-right:10px;
text-align:center;
width:92%;
border-bottom-left-radius:20px;
border-bottom-right-radius:20px;
float:right;
margin-bottom:20px;
margin-right:20px;
margin-left:20px;
color:#aba9a8;
}
.html
<div class="bg1">
<div class="main">
<p></p>
</div>
</div>
<div class="bg2">
<div class="black">
<p>Test</p>
</div>
</div>
<div class="bg3">
<div class="grey">
<p>Test</p>
</div>
</div>
Js Fiddle:
http://jsfiddle.net/W4Xb3/1/
I made some changes to your HTML, wrapping it in a "table" div and display the children as tablecells. (dropping .bg3, since it isn't needed)
HTML:
<div class="wrap">
<div class="bg1">
<div class="main">
...
</div>
</div>
<div class="bg2">
<div class="black">
...
</div>
<div class="grey">
...
</div>
</div>
</div>
CSS:
.wrap {
display: table;
width: 100%;
}
.bg1 {
display: table-cell;
vertical-align: top;
}
.bg2 {
width:35%;
display: table-cell;
vertical-align: top;
}
And the updated Fiddle.
You're fighting issues with borders/margins/padding modifying the height/width. IE before v9 used border-box as default, all other browsers and new versions of IE use content-box. The only time I'll admit IE made things easier:
http://www.w3schools.com/cssref/css3_pr_box-sizing.asp
Try border-box on everything then readjust your height/width values.
I need to arrange three columns of divboxes with 33% width of the outer box, besides a fixed-width menu.
http://jsfiddle.net/uvw5c/1/
So i want the red, yellow, green area beides the orange menu, in ANY case of width of #menu.
<div id="container">
<div id="menu">
menu
</div>
<div id="dialogbox">
<div id="outer">
<div class="inner" style="background-color:red;">
col1
</div>
<div class="inner">
col2
</div>
<div class="inner" style="background-color:green;">
col3
</div>
</div>
</div>
</div>
#container{
width:500px;
background-color:grey;
height:300px;
}
#menu{
width:300px;
float:left;
height:100%;
background-color:orange;
}
#dialogbox{
float:left;
height:100%;
width:100%;
}
#outer{
background-color:blue;
height:300px;
margin: 0 auto;
padding:0;
width:100%;
}
.inner{
padding:0;
margin:0;
width:33%;
background-color:yellow;
height:100%;
float:left;
}
Thanks in Advance for any hints!
For this specific case you can do away with a lot of the markup and use display: table; and table-cell;. Set the width of the menu, and the others will automatically fill the rest equally.
HTML:
<div id="container">
<div id="menu">
menu
</div>
<div class="inner" style="background-color:red;">
test
</div>
<div class="inner">
test
</div>
<div class="inner" style="background-color:green;">
test
</div>
</div>
CSS:
#container{
width:500px;
display: table;
height: 300px;
}
#menu{
width: 100px;
background: #00f;
display: table-cell;
}
.inner{
padding:0;
margin:0;
background-color:yellow;
height:100%;
display: table-cell;
}
Fiddle: http://jsfiddle.net/Kyle_Sevenoaks/uvw5c/5/
Make a div containing both the menu and the .inner elements.
Also check that width of inner must be 33.3% and 33.4% for one element (maybe the one in the middle)
I found a solution with the help of a friend:
http://jsfiddle.net/t39yV/2/
its very smart to use margin-left on the #dialogbox ;)
#container{
width:100%;
background-color:grey;
height:300px;
}
#menu{
width:100px;
float:left;
height:100%;
background-color:orange;
}
#dialogbox{
margin-left:100px;
height:100%;
}
#outer{
background-color:blue;
height:300px;
margin: 0 auto;
padding:0;
width:100%;
}
.inner{
padding:0;
margin:0;
width:33.3%;
background-color:yellow;
height:100%;
float:left;
}
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.