I want to center the practiceType div inside the practice div block. It is a jquery mobile page. Here is my code.
<body>
<div data-role="page" id="practice" >
<!-- /header -->
<div data-role="header" id="appheader">
<h2 style="text-align:center;">XXX - Practice Test</h2>
</div>
<!-- /content -->
<div role="main" class="ui-content" id="practiceType" style="margin-top:25%;margin-bottom:25%;">
<div data-role="main" class="ui-content" >
MATH PRACTICE TEST
ELA PRATICE TEST
</div>
</div>
<!-- /footer -->
<div data-role="footer" data-position="fixed" data-tap-toggle="false" id="appfooter" >
<h6>Comprehensive Learning Resources</h6>
</div>
</div><!-- /page -->
</body>
</html>
how to vertically center an element
.element {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
then, set the parent div to
position: relative;
so your new code will be:
#practiceType {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
#practice {
position: relative;
}
You can use flexbox to achieve that.
.container {
width: 500px;
height: 200px;
background: blue;
display: flex;
align-items: center;
justify-content: center;
}
.child {
width: 50px;
height: 50px;
background: red;
}
<div class="container">
<div class="child"></div>
</div>
Below css will help you center the div.
#outer{
background-color: #000;
float: left;
height: 200px;
width: 100%;
}
#centerDiv{
background-color: #fff;
height: 150px;
margin: auto;
width: 70%;
}
check this demo
Try below code for center the text
#outerDiv{
float: left;
width: 100%;
}
#outerDiv h2{
text-align:center;
}
Related
I'm working on webpage and divided it into several divs before adding text in it.
but when i put some text in one of that divs, all divs position just collapses.
I've made simple code to show the problem.
html{
height: 100%;
}
body{
height: 100%;
}
#wrapper{
height: 100%;
}
.box{
display: inline-block;
position: relative;
background: black;
}
#box-1{
top: 5%;
left: 5%;
height: 35%;
width: 35%;
}
#box-2{
top: 5%;
left: 10%;
height: 35%;
width: 50%;
}
#box-3{
top: 10%;
left: 5%;
height: 50%;
width: 35%;
}
#box-4{
top: 10%;
left: 10%;
height: 50%;
width: 50%;
}
<!DOCTYPE html>
<html>
<head>
<title>Issue</title>
</head>
<body>
<div id="wrapper">
<div id="box-1" class="box">
</div>
<div id="box-2" class="box">
</div>
<div id="box-3" class="box">
</div>
<div id="box-4" class="box">
</div>
</div>
</body>
</html>
As you can see, it is divided well without problem(at least in my opinion)
But as soon as you add the text in the div, it just collapse and I can't see why.
html{
height: 100%;
}
body{
height: 100%;
}
#wrapper{
height: 100%;
}
.box{
display: inline-block;
position: relative;
background: black;
}
#box-1{
top: 5%;
left: 5%;
height: 35%;
width: 35%;
}
#box-2{
top: 5%;
left: 10%;
height: 35%;
width: 50%;
}
#box-3{
top: 10%;
left: 5%;
height: 50%;
width: 35%;
}
#box-4{
top: 10%;
left: 10%;
height: 50%;
width: 50%;
}
p{
color: white;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="wrapper">
<div id="box-1" class="box">
<p>Hi</p>
</div>
<div id="box-2" class="box">
</div>
<div id="box-3" class="box">
</div>
<div id="box-4" class="box">
</div>
</div>
</body>
</html>
It collapses whether p tag exists or not.
Divs are positioned with %unit and it is relative.
So it should be relevent only to it's parent and brothers in my thought.
Should I reallocate all of them with absolute position?
If you know why, or have solution, please teach me.
thank you!
Put vertical-align: top; to .box by default it has vertical-align: baseline;
.box {
display: inline-block;
vertical-align: top;
position: relative;
background: black;
}
Alternative beside Ismail Farooq's answer
.box {
display: block;
position: relative;
background: black;
float: left;
}
I am using flexbox link is Flexbox here
<html>
<style>
html{
height: 100%;
}
body{
height: 100%;
}
#wrapper{
height: 100vh;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.box{
display: flex;
background: black;
margin: 0.5%;
}
#box-1{
height: 50%;
width: 49%;
}
#box-2{
height: 50%;
width: 49%;
}
#box-3{
height: 50%;
width: 49%;
}
#box-4{
height: 50%;
width: 49%;
}
p{
color: white;
}
</style>
<body>
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="wrapper">
<div id="box-1" class="box">
<p>Hi</p>
</div>
<div id="box-2" class="box">
</div>
<div id="box-3" class="box">
</div>
<div id="box-4" class="box">
</div>
</div>
</body>
</html>
</body>
</html>
I have a layout like below -
.page-wrapper {
height: 100%;
min-height: 970px;
position: relative;
}
.pageheader {
min-height: 50px;
position: fixed;
min-width: 100%;
}
.navbar-fixed-top {
top: 0;
}
.page-sidebar {
float: left;
width: 180px;
top: 0;
overflow: auto;
}
.page-content {
min-height: 970px;
float: left;
}
footer {
width: 100%;
text-align: center;
position: relative;
}
<div class="page-wrapper">
<div>
<div id="header" class="pageheader navbar navbar-fixed-top">
Navbar Top
</div>
<div class="clearfix"></div>
</div>
<div class="content-wrapper">
<div>
<div class="clearfix"></div>
<div id=".navbar-collapse" class="page-sidebar">
Navbar Side
</div>
<div class="clearfix"></div>
</div>
<div>
<div id="content" class="page-content">
Content
</div>
</div>
<div>
<footer id="footer">
Foter
</footer>
</div>
</div>
My main content-wrapper is coming below the sidebar and footer somewhere in the middle. I have tried using
display:inline-flex
on content-wrapper which places page-content next to sidebar but footer still remains in middle of page. Please help me with this.
You can set page-content width using calc. check updated snippet below
body {
margin: 0px;
}
.page-wrapper {
height: 100%;
min-height: 970px;
position: relative;
width: 100%;
padding-top: 50px;
display: block;
}
.pageheader {
min-height: 50px;
position: fixed;
min-width: 100%;
background: red;
}
.navbar-fixed-top {
top: 0;
}
.content-wrapper {
background: grey;
float: left;
width: 100%;
}
.page-sidebar {
float: left;
width: 180px;
overflow: auto;
}
.page-content {
min-height: 970px;
float:left;
background: green;
width: calc(100% - 180px);
}
footer {
width: 100%;
text-align: center;
position:relative;
background: black;
clear: both;
}
<div class="page-wrapper">
<div>
<div id="header" class="pageheader navbar navbar-fixed-top"> header<br/>
</div>
<div class="clearfix"></div>
</div>
<div class="content-wrapper">
<div>
<div class="clearfix"></div>
<div id=".navbar-collapse" class="page-sidebar">sidebar</div>
<div class="clearfix"></div>
</div>
<div>
<div id="content" class="page-content"> content
</div>
</div>
<div class="clearfix"></div>
<div>
<footer id="footer">footer
</footer>
</div>
</div>
what is the HTML with CSS Code to align have logo and text in the same line...that it must look as shown in the below pattern..
HTML:
<div class="top_left">
<div class="header">
<img src="https://b.fastcompany.net/multisite_files/fastcompany/imagecache/inline-small/inline/2015/09/3050613-inline-i-2-googles-new-logo-copy.png" alt="logo"/> <br/>
</div>
<h2 id="site-title"><a>GOOGLE</a>
<div id="site-description">SEARCH ENGINE </div>
</h2>
</div>
You can use the following html/css combo:
/* CSS */
.container-div {
position: fixed;
top: 0px;
left: 0px;
width: 250px;
height: 150px;
}
.img-div {
display: inline-block;
position: relative;
width: 45%;
height: 100%;
overflow: hidden;
}
.img-div img {
position: absolute;
top: 0px;
left: 5%;
width: 90%;
height: 50%;
border: 1px solid red;
}
.img-placeholder {
position: absolute;
top: 7.5%;
left: 15%;
}
.text-div {
display: inline-block;
position: relative;
width: 50%;
height: 100%;
border: 1px solid green;
overflow: auto;
}
<!-- HTML -->
<div class="container-div">
<div class="img-div">
<img />
<p class="img-placeholder">
Image Goes Here
</p>
</div>
<div class="text-div">
<h2>
Texty-text
</h2>
<p>
Sub-texty-text
</p>
</div>
</div>
Use this code
<p><img src="https://cdn.pixabay.com/photo/2016/12/27/21/03/lone-tree-1934897_960_720.jpg" alt="imag" style="height: 50px;width: 50px;"><span>kiran</span></p>
hello try to make a container for the logo and the text and a few div with a float that would do the job if i am right
like this
<div class="name of class you made" //give jut a with>
<div class="logo" //put float in this with a with>logo</div><div class="tekst" //put float in this with a with>tekst</div>
</div>
i am not sure but this would help
You can either use (on the h4 elements, as they are block by default)
display: inline-block;
Or you can float the elements to the left/rght
float: left;
Just don't forget to clear the floats after
clear: left;
Try something like this
<div class="container">
<div id="logo">
<img src="http://placehold.it/150x100">
</div>
<div id="text">
<h2>Hello</h2>
<h3>World</h3>
</div>
</div>
CSS:
.container > div {
display: inline-block;
padding: 5px;
}
#logo, #text {
float: left;
}
Here's the fiddle
I want to get structure like this:
---------------------------------------------
| head |
---------------------------------------------
|left-menu||---content-div-------------------
| fixed || | |
| || content-left | con-right|
| ||--------------------------------|
css file:
.left-menu {
position:fixed; /* fix menu, no scroll */
left:0;
}
.content-div {
position:absolute;
float:right;
left:150px;
}
.content-right {
width: 310px;
float: right;
}
.content-left {
float: left;
}
divs:
<div>
<div class="left-menu" > </div>
<div class="content-div">
<div class="content-left"> </div>
<div class="content-right"> </div>
</div>
</div>
I get content-right in the next line, not in the same line with content-left, like i have content-left width=105%, but i don't. I tried this and some other suggestion, but no luck. How can i fix this problem?
Flexbox can do that.
* {
margin: 0;
padding: 0;
}
.parent {
display: flex;
height: 100vh;
}
.left-menu {
position: fixed;
/* fix menu, no scroll */
left: 0;
width: 150px;
background: red;
height: 100%;
}
.content-div {
margin-left: 150px;
background: blue;
flex: 1;
display: flex;
}
.content-right {
flex: 0 0 310px;
}
.content-left {
flex: 1;
background: orange;
}
<div class="parent">
<div class="left-menu"></div>
<div class="content-div">
<div class="content-left"></div>
<div class="content-right"></div>
</div>
</div>
Check out the JsFiddle for the demo
HTML
<div>
<div class="header">HEADER</div>
<div class="left-menu" >LEFT MENU</div>
<div class="content-div">
<div class="content-left">CONTENT LEFT</div>
<div class="content-right">CONTENT RIGHT</div>
</div>
</div>
CSS
.header {
height: 70px;
background: blue;
}
.left-menu {
width: 120px;
background: red;
position: fixed;
left: 0px;
top: 70px;
bottom: 0px;
}
.content-div {background: yellow;margin-left: 120px}
.content-div div {
display: inline-block;
width: 49%;
}
.content-left {background: aqua;}
.content-right {background: green;}
Position anything is a pain, I suggest using bootstrap for something like this.
(I just saw the comment above me about suggesting the same thing but I'll give you the code so you can implement it just incase)
Bootstrap supplies a nice CDN that you can throw in your html and have bootstrap wherever you go!
So put all of this in your html...
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>Header</h1>
</div> <!-- col-lg-12" -->
</div> <!-- row -->
<div class="row">
<div class="col-lg-3" style="position: fixed;">
<p>Left Menu Fixed</p>
</div> <!-- col-lg-3 -->
<div class="col-lg-6">
<p>Content Left</p>
</div> <!-- col-lg-6 -->
<div class="col-lg-3">
<p>Content Right</p>
</div> <!-- col-lg-3 -->
</div> <!-- row -->
</div> <!-- container -->
</body>
</html>
This will provide the layout you're suggesting.
Hope this helps!
This should work for what you want
.left-menu {
position:fixed; /* fix menu, no scroll */
left:0;
width: 150px;
height: 100%;
}
.content-div {
position:fixed;
left:150px;
right: 0px;
height: 100%;
}
.content-right {
float: right;
}
.content-left {
float: left;
}
Set a height and background-color on .content-left and .content-right if you want to see how they position themselves.
.left-menu {
position:fixed; /* fix menu, no scroll */
left:0;
background: black;
width:15%;
height: 100%;
}
.content-div {
position:absolute;
float:right;
left:16%;
background: red;
width:84%;
height: 100%;
}
.content-right {
width: 310px;
height: 100%;
float: right;
background: yellow;
}
.content-left {
float: left;
background: green;
height: 100%;
width: calc(100% - 310px);
}
I'm currently working on a chat project with Bootstrap and I have issues positioning my divs. Here's my pattern:
<div class="container">
<div class="row"> <!-- #header -->
<h1>Header stuff</h1>
</div>
<div class="row"> <!-- #main -->
<div class="col-sm-9">
<ul>Chat messages</ul> <!-- #chatbox -->
</div>
<div class="col-sm-3">
<ul>Users list</ul> <!-- #users -->
</div>
</div>
<div class="row"> <!-- #input -->
<form>Input zone</form>
</div>
</div>
Basically what I want is to fit these 3 row sections into the browser's height, so that the input zone is always at the bottom of the screen and the page is not scrollable, but I want both the #chatbox and the #users to be scrollable so that they fit in the #main.
Here is what I've done so far:
html, body {
height: 100%;
margin: 0;
}
body > .container {
height: 100%; /* Fit the container into the window */
}
.row#main > div {
max-height: 100%; /* This doesn't */
overflow: auto; /* work :( */
}
.row#input { /* Stick the input zone at the bottom */
position: absolute;
bottom: 0px;
width: 100%;
margin-bottom: 0px;
}
But when I extend the #chatbox or the #users, I don't get a good result :(
Anyone's got an idea? I'd like a full-CSS solution if possible :3
Thanks ^^
I've made a little demo for you to resolve this issue. Its pure CSS and suitable for any responsive layout.
You need to use the absolute position cleverly.
demo http://jsfiddle.net/h87p14tx/2/
HTML
<div class="row header"> <!-- #header -->
<h1>Header stuff</h1>
</div>
<div class="row main"> <!-- #main -->
<div class="col-sm-9 chatbox"> <!-- #chatbox -->
<ul>Chat messages</ul>
</div>
<div class="col-sm-3 users"> <!-- #users -->
<ul>Users list</ul>
</div>
</div>
<div class="row input"> <!-- #input -->
<form>Input zone</form>
</div>
CSS
.header, .input {
width: 100%; position: absolute;
background: red;
}
.header {
top: 0;
height: 70px;
}
.input {
bottom: 0;
height: 50px;
}
.main {
width: 100%; position: absolute; top: 70px; bottom: 50px;
background: green;
overflow: auto;
}
.chatbox, .users{
height: 100%;
}
.main .chatbox{
width: 70%;
float: left;
background: blue;
}
.main .users{
width: 30%;
float: right;
background: yellow;
}
Assuming you are essentially creating a header/body/footer layout, this should do the job:
html,
body {
min-height: 100%;
padding:0;
margin:0;
}
#main {
position: absolute;
padding: 100px 0;
top:0;
bottom:0;
left:0;
right:0;
background-color: red;
}
#header {
margin-top:-100px;
height:100px;
background-color: blue;
}
#body {
min-height: 100%
}
#footer {
height: 100px;
margin-bottom: -100px;
background-color:green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/bootstrap/3.3.0/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<div id="main" class="container">
<div id="header" class="row"> <!-- #header -->
<h1>Header stuff</h1>
</div>
<div id="body" class="row"> <!-- #main -->
<div class="col-sm-9">
<ul>Chat messages</ul> <!-- #chatbox -->
</div>
<div class="col-sm-3">
<ul>Users list</ul> <!-- #users -->
</div>
</div>
<div id="footer" class="row"> <!-- #input -->
<form>Input zone</form>
</div>
</div>