How to position 3 divs - 3 chunks of text link on the same line in left, center and right?
I need it to position under Joomla article 3 navigation links: PREV, INDEX, NEXT - on the same line...PREV - on left, INDEX - center and NEXT-right;
I know I cannot use float, because there is no float center; if I am trying to use divs - they are not on the same line again...
for example I was trying with
<div style="width:700px;">
<div style="width:50px; margin-left:20px;">Prev</div>
<div style="width:50px; margin-left:350px;">Index</div>
</div>
Here you go.
WORKING DEMO
The HTML:
<div class="wrapper">
<div class="equal left">PREV</div>
<div class="equal center">INDEX</div>
<div class="equal right">NEXT</div>
</div>
The CSS:
.wrapper{width:100%; display:table;}
.equal{display:table-cell;}
.left{text-align:left;}
.center{text-align:center;}
.right{text-align:right;}
Hope this helps.
If you want to put a div in the center of the page horizontally, you can use the css
margin-left: auto; margin-right:auto;
try this one
<div class="main">
<div class="div1">
<div class="div2"></div>
<div class=="div3"></div>
</div>
<div class="div4"></div>
</div>
and in css
.div1 {
float:left;
}
.div4 {
float:right;
}
.div2 {
float:left;
}
.div3 {
float:right;
}
You could always do it via a list like so:
HTML:
<ul class="pagination">
<li>Prev</li>
<li>Next</li>
</ul>
CSS:
ul.pagination {
width: 700px;
}
ul.pagination li {
float: left;
list-style: none;
}
<div style="width:700px;">
<div style="width:50px; margin-left:20px;display: inline-block;">Prev</div>
<div style="width:50px; margin-left:350px;display: inline-block;">Index</div>
</div>
DEMO
.master{width:100%; text-align:center; }
.master div{display:inline}
.left{float:left}
.right{float:right}
Related
<div class="image">
</div>
<div class="form">
</div>
.image{
float:left;
}
.form{
float:left;
}
This will put them side-by-side on the left-hand side of the screen. But how can I center them?
You must to change all behaviour. First wrap the html like this:
<div class="wrapper">
<div class="image">
</div>
<div class="form">
</div>
</div>
And the CSS:
.wrapper {
text-align : center;
}
.image, .form {
display: inline-block;
vertical-align: top;
}
I'm trying align two tables side by side in a floated left div. I think I've got how to horizontally align divs in general with floats but in my example below, once I create 3 columns, all floated left, I can't get the two tables in the 3rd column in the div.nestedHorizontalTables to display side by side. I tried display:inline-block but they still keep stacking vertically.
html
<div class="main-content">
<div class="column1">
<table>table1</table>
</div>
<div id="column2">
<!--I want a group of 4 vertical pie charts here-->
<div id="pie1"></div>
<div id="pie2"></div>
<div id="pie3"></div>
<div id="pie4"></div>
</div>
<div id="column3">
<div class="nestedHorizontalTables">
<table id="tab2">table2</table>
<table id="tab3">table3</table>
</div>
<table>Table4</table>
<div class="nestedHorizontalPieAndTable">
<table>table5</table>
<div id="pie6"></div>
</div>
</div>
</div>
css
#column1{
float:left;
width:40%;
}
#column2{
float:left;
width:20%;
}
#column3{
float:left;
width:40%;
}
.nestedHorizontalTables{
display:inline-block;
}
#tab2{
width:80%;
}
#tab3{
width:20%;
}
thanks
.main-content
{
margin:0;
padding:0;
float:left;
width:100%;
}
.column1 {
margin:0;
float: left;
width: 40%;
}
#column2 {
margin:0;
float: left;
width: 20%;
}
#column3 {
margin:0;
float: left;
width: 40%;
}
.nestedHorizontalTables {
display: inline-block;
}
#tab2 {
width: 80%;
}
#tab3 {
width: 20%;
}
<div class="main-content">
<div class="column1">
<table>table1</table>
</div>
<div id="column2">
<!--I want a group of 4 vertical pie charts here-->
<div id="pie1">hello</div>
<div id="pie2"></div>
<div id="pie3"></div>
<div id="pie4"></div>
</div>
<div id="column3">
<div class="nestedHorizontalTables">
<table id="tab2">table2</table>
<table id="tab3">table3</table>
</div>
<table>Table4</table>
<div class="nestedHorizontalPieAndTable">
<table>table5</table>
<div id="pie6"></div>
</div>
</div>
</div>
You may try this
If you just want the two tables inside nestedHorizontalTables to be displayed side by side, add float:left to both.
#tab2 {
width:80%;
float:left;
}
#tab3 {
width:20%;
float:left;
}
Here is a jsFiddle to help you.
I am trying to make my logo and manu bar to follow my page as i scroll down the page,
Currently this is what i have.
CSS is;
html,body {
background-image:url(../img/background.png);
background-size:cover;
background:fixed;
}
#bar {
margin-top:55px;
width: 1920px center;
height: 30px;
background: #2E2E2E;
border: 3.2px groove #FFD700;
}
#logo {
position:absolute;
background-image:url(../img/LOGO1.png);
background-size:150px;
width:150px;
height:150px;
margin:0 auto;
z-index:1;
top:0px;
margin: 0 auto;
left:0px;
right:0px;
}
#middle
{
height:10000px;
}
and for HTML:
</head>
<body>
<div id="logo">
</div>
<div id="bar">
</div>
<div id="middle">
</div>
</body>
</html>
So please what would i need to change to make both 'bar' and 'logo' follow my scroll.
thankyou for you help
Here is a jsfiddle with how I would do it...
http://jsfiddle.net/2Zqhw/
I've wrapped both elements in a div, gave it position:fixed and width:100%
You need a div to wrap your logo and bar and use CSS to set the position to fixed.
The CSS:
#nav-fixed {
position:fixed;
}
The HTML:
<div id="nav-fixed">
<div id="logo">
</div>
<div id="bar">
</div>
</div>
You could try nesting logo and bar within another div and then setting position:fixed on the enclosing div so your HTML would look something like:
<div id="fixed_bar" style="position:fixed;">
<div id="logo"/>
<div id="bar"/>
</div>
<div id="middle">
</div>
Or you could add the enclosing div as above but define the style for it in the CSS:
#fixed_bar
{
position:fixed;
}
With the HTML:
<div id="fixed_bar">
<div id="logo"/>
<div id="bar"/>
</div>
<div id="middle">
</div>
Basically, I want two different elements in the leftmost area of a div, and two for the rightmost area of a div.
However if I use float:left and float:right twice, I get the following:
ELEMENT ELEMENT
ELEMENT ELEMENT
rather than
ELEMENT ELEMENT
ELEMENT ELEMENT
This is because, when I float for the second time the css floats for the remaining space left.
How do I fix this bug?
You can use clear:both; with float:left; property.
Try Jsbin demo
.left {
float:left;
width:40%;
height:240px;
border:1px solid red;
}
.right {
float:right;
width:40%;
border:1px solid red;
height:240px;
}
.elem1 {
float:left;
margin-bottom:20px;
}
.elem2 {
float:left;
clear:both;
}
.elem3 {
float:left;
margin-bottom:20px;
}
.elem4 {
float:left;
clear:both;
}
<div class="left">
<div class="elem1">element 1</div>
<div class="elem2">element 2</div>
</div>
<div class="right">
<div class="elem3">element3</div>
<div class="elem4">element4</div>
</div>
What you need is a clear: both in your CSS.
Your floats are working fine, but there is not enough content to push the next elements below the first elements. If you set them to clear, then they will.
Try this one:
Markup:
<div class='clear:both'>
<!-- left container -->
<div style = "float:left;">
<div style = "float:left;">
Element
</div>
<div style = "float:left; clear:left;">
Element
</div>
</div>
<!-- right container -->
<div style = "float:right">
<div style = "float:right;">
Element
</div>
<div style = "float:right; clear:right;">
Element
</div>
</div>
Please use your own external style, this is just to guide you.
Please have a look here on jsfiddle
.wrapper {
height:100px;
border:1px solid red;
margin: 5px;
}
.left {
margin: 10px;
float:left;
width: 45%;
}
.right {
margin: 10px;
float:right;
width: 45%;
}
<div class="wrapper">
<div class="left">element 1</div>
<div class="right">element 2</div>
</div>
<div class="wrapper">
<div class="left">element3</div>
<div class="right">element4</div>
</div>
This works for me.
.right {
float:right;
}
.left {
float:left;
}
<div>
<div class="right">1 element</div>
<div style="clear:both"></div>
<div class="right">1 element</div>
<div class="left">1 element</div>
<div style="clear:both"></div>
<div class="left">1 element</div>
</div>
Here is the fiddle. http://jsfiddle.net/nQvEW/143/
I'm trying to align a few divs into this structure but nothing is working.
<div>
<div>top</div>
<div>middle
<div>left</div> <div>right</div>
</div>
<div>bottom</div>
</div>
Ive tried using floats with abosolutes, blocks, etc closest im getting is with block-inline but the div which i need aligned right just sits up close to the left div,ived add text-align right with no joy.
Many Thanks
D
try this
<div>
<div>top</div>
<div>
<div style="float:left;">left</div>
<div style="float:left;">right</div>
</div>
<div style="clear:both;">bottom</div>
</div>
the bottom div with clear:both is probably not enough but does the trick in this particular example
google clearfix for this
Give the left and right div a width and let them float
Make sure you also clear the float by adding an extra div below with: clear: both;
Code:
<div id="wrap">
<div id="top">top</div>
<div id="mid">
<div id="left">left</div>
<div id="right">right</div>
<div class="clear"></div>
</div>
<div id="bot">bottom</div>
</div>
CSS:
div {
background: #ccc;
height: 15px;
margin-bottom: 10px;
}
.clear {
clear: both;
}
#wrap {
width: 400px;
}
#top {
}
#mid {
}
#left {
float: left;
width: 200px;
}
#right {
float: left;
width: 200px;
}
#bot {
}
See code in action: http://jsfiddle.net/GZg6y/
you can do this in different ways, one through float css property, make sure you specify the width as in this example:
<div class="container">
<div class="top">top</div>
<div class="middle">
<div class="left">left</div> <div class="right">right</div>
</div>
<div class="bottom">bottom</div>
and your css should look like this:
.left{
float:left;
width:50%;
background:green;
}
.right{
float:right;
width:50%;
background:blue;
}
.bottom{
clear:both;
}
see here http://jsfiddle.net/M3met/1/