I have DIV tags float left and right. By default the right DIV is hidden. I would like to show the first DIV in center by default when right DIV is hidden and move to left when right DIV is visible. Could you please suggest?
<div id="main">
<div id="left1" style="width: 50%; float: left">
<a href id="link">link</a>
</div>
<div id="right1" style="width: 50%; float: right; display:none"></div>
</div>
Rearrange your html like so:
<div id="main">
<div id="right1" >
</div>
<div id="left1">
<a href id="link">link</a>
</div>
</div>
Set CSS like so:
#main {
text-align: center;
}
#left1 {
display: inline-block;
width: 50%;
text-align: left; /* if you need it left */
}
#right1 {
width: 50%;
float: right;
}
See example fiddle.
Here's a javascript example using actual floats http://jsfiddle.net/tprats108/DNve9/
HTML
<div id="main">
<div id="left1" class="element center">
Show
</div>
<div id="right1" class="element hidden">
Text
</div>
</div>
CSS
.left {
float: left;
}
.right {
float: right;
}
.center {
text-align: center;
}
.element {
width: 50%;
}
.hidden {
display: none;
}
JS (using jquery)
$(document).ready(function() {
$("#show").click(function() {
$("#left1").toggleClass("left center");
$("#right1").toggleClass("right hidden");
});
});
Related
This image shows what I am trying to do.
Basically, I have a header and footer inside the body. I have a div1 inside a header which has a size that can vary. I want to align div2, which is inside the footer, so that its right border is matches the right border of div1.
The following HTML can explain the structure.
<body>
<div id="header">
<div id="div1">
</div>
</div>
<div id="footer">
<div id="div2">
</div>
</div>
This would be the css.
#div1 {
overflow: auto;
display: grid;
float: start;
}
#div2 {
width: 20px;
// ??????
}
There's no float: start. You just be better off having a common container, as how it is in Bootstrap and other frameworks to "contain" your code. So your page might be rendered well this way:
body {
font-family: 'Segoe UI';
background: #ffa500;
}
#header {
background-color: #fcc;
padding: 10px;
}
#footer {
background-color: #f99;
padding: 10px;
}
.container {
max-width: 65%;
overflow: hidden;
}
#div1 {
padding: 10px;
background-color: #99f;
}
#div2 {
padding: 10px;
background-color: #ccf;
float: right;
width: 50%;
}
<div id="header">
<div class="container">
<div id="div1">
div1
</div>
</div>
</div>
<div id="footer">
<div class="container">
<div id="div2">
div2
</div>
</div>
</div>
Preview
I have a div #1 with a variable width and variable height. Now I want to position a div #2 with fixed width and height next to the right site of #1.
These two divs should be inside another div with width: 100%, because I want to repeat those two divs.
Here is an image (white: div #1, black: div #2):
How would I do that?
I played around with floating
Using a flexbox for the rows. I put the width for the white box as inline CSS because I assume it will be calculated somehow in your code.
.container {
background: lightgreen;
padding: 3em;
}
.row {
display: flex;
height: 4em;
}
.row:not(:last-child) {
margin-bottom: 1em;
}
.flexible {
background: white;
}
.fixed {
background: black;
width: 1em;
}
<div class="container">
<div class="row">
<div class="flexible" style="width:150px"></div>
<div class="fixed"></div>
</div>
<div class="row">
<div class="flexible" style="width:500px"></div>
<div class="fixed"></div>
</div>
<div class="row">
<div class="flexible" style="width:50px"></div>
<div class="fixed"></div>
</div>
</div>
Use flex.
.container {
display: flex;
}
.secondDiv {
width: 200px;
}
You can use this example:
.container{
width: 100%;
}
.div1{
width: <div1 width>;
height: <div1 height>;
float: left;
background-color: white;
}
.div2{
float: left;
width: <div2 width>;
height: <div1 height>;
background-color: black;
}
You should group this two divs (div1 and div2) in another div, inside de container with 100% width:
<div id="container" class="container">
<div id="block1" style="float: left; width: 100%">
<div id="div1" class="div1">
</div>
<div id="div2" class="div2">
</div>
</div>
...
</div>
I need to display one paragraph aligned to the left, another paragraph aligned to the right, and a centered image, all on the same line on the footer of a webpage.
How do I achieve that? My current code gets the second paragraph on a new line.
HTML
<div id="footer">
<p class="alignleft">Text</p>
<img id="logo" src="#">
<p class="alignright">More text</p>
</div>
CSS
.alignleft {
float: left;
}
.alignright {
float: right;
}
#logo {
display: block;
margin-left: auto;
margin-right: auto;
}
Hope this helps for you:
<div id="footer">
<span>Text</span>
<span><img src="http://www.klm.com/jobs/nl/images/icon_flight_32x32_tcm701-312701.gif" /></span>
<span>More text</span>
</div>
#footer {
width: 100%;
display: table;
table-layout: fixed;
background: gray;
}
#footer span {
display: table-cell;
}
#footer span:nth-child(2) { text-align: center; }
#footer span:last-child { text-align: right; }
JSFiddle DEMO
Here's what I ended up doing:
Enclosing the texts and images on DIVs,
Explicitly setting the width percentage of these DIVs to 33.333% (1/3rd) each,
Left-Floating these DIVs,
Using text-align to align the elements inside those DIVs.
No need to change the order of my HTML, and works with as many elements as needed, just changing the percentage value! :)
Code
HTML
<footer>
<div id="footerleft"><p>Text</p></div>
<div id="footercenter"><img src="./img/logo.jpg" alt="Logo"></div>
<div id="footerright"><p>More Text</p></div>
</footer>
CSS
#footerleft {
float: left;
width:33.333%;
text-align:left;
}
#footercenter {
float: left;
width: 33.333%;
text-align: center;
}
#footerright {
float: left;
width:33.333%;
text-align:right;
}
You need to rearrange your HTML:
<div id="footer">
<p class="alignleft">Text</p>
<p class="alignright">More text</p>
<img id="logo" src="#" />
</div>
DEMO
On my page I have two elements in a header area. I would like the first element to be centered in the middle of the header area and a second element that is pushed all the way to the right side of the header area. I achieved the desired effect using this code:
<div id="header-area" style="text-align:center;width:100%;">
<div id="partition1" style="display:inline-block;width:33%;"></div>
<div id="partition2" style="display:inline-block;width:33%;">
<div id="element1" style="display:inline;width:400px;height:100px;">
<h3 style="display:inline;width:400px;">Main title Goes Here</h3><br/><br/>
<p style="display:inline;width:400px;">Subtitle goes here</p>
</div>
</div>
<div id="partition3" style="display:inline-block;width:33%;text-align:right;">
<div id="Element2" style="display:inline;width:150px;vertical-align:middle;">
<button onclick="history.back();" style="height:45px;width:100px;">
Back</button>
</div>
</div>
</div>
You will notice I partitioned the header-area into three spaces and aligned the element1 & element2 within their respective partitions. How can I achieve the same layout without partitioning the header-area?
There's several ways to do this. Here are two:
Option #1: Float
The HTML:
<div id="header">
<div class="right">Element on right end</div>
<div class="center">Center-Aligned Element</div>
</div>
The CSS:
#header {
text-align: center;
}
#header div.center {
margin: 0 auto;
text-align: center;
width: 30%;
}
#header div.right {
float: right;
text-align: right;
}
Option #2: Position absolute
The HTML:
<div id="header">
<div>Center-Aligned Element</div>
<div class="right">Element on right end</div>
</div>
The CSS:
#header {
text-align: center;
}
#header div {
text-align: center;
width: 30%;
margin: 0 auto;
}
#header div.right {
position: absolute;
top: 0;
right: 0;
text-align: right;
}
Example Using Your Elements:
The HTML:
<div id="header">
<h3>Main Title Goes Here</h3>
<p>Subtitle Goes Here</h3>
<button>Element on right end</button>
</div>
The CSS:
#header {
text-align: center;
}
#header h3,
#header p {
margin: 0 auto;
text-align: center;
width: 30%;
}
#header button {
position: absolute;
top: 0;
right: 0;
}
I know this is a rather simple question, but I can't figure it out for the life of me. I have two links which I've applied a background image to. Here's what it currently looks like (apologies for the shadow, just a rough sketch of a button):
However, I want those two buttons to be side by side. I can't really figure out what needs to be done with the alignment.
Here's the HTML
<div id="dB"}>
Download
</div>
<div id="gB">
Gallery
</div>
Here's the CSS
#buyButton {
background: url("assets/buy.png") 0 0 no-repeat;
display:block;
height:80px;
width:232px;
text-indent:-9999px;
}
#buyButton:hover{
width: 232px;
height: 80px;
background-position: -232px 0;
}
#buyButton:active {
width: 232px;
height: 80px;
background-position: -464px 0;
}
#galleryButton {
background: url("images/galleryButton.png") 0 0 no-repeat;
display:block;
height:80px;
width:230px;
text-indent:-9999px;
}
#galleryButton:hover{
width: 230px;
height: 80px;
background-position: -230px 0;
}
#galleryButton:active {
width: 230px;
height: 80px;
background-position: -460px 0;
}
Beware float: left… 🤔
…there are many ways to align elements side-by-side.
Below are the most common ways to achieve two elements side-by-side…
Demo: View/edit all the below examples on Codepen
Basic styles for all examples below…
Some basic css styles for parent and child elements in these examples:
.parent {
background: mediumpurple;
padding: 1rem;
}
.child {
border: 1px solid indigo;
padding: 1rem;
}
Using the float solution my have unintended affect on other elements. (Hint: You may need to use a clearfix.)
html
<div class='parent'>
<div class='child float-left-child'>A</div>
<div class='child float-left-child'>B</div>
</div>
css
.float-left-child {
float: left;
}
html
<div class='parent'>
<div class='child inline-block-child'>A</div>
<div class='child inline-block-child'>B</div>
</div>
css
.inline-block-child {
display: inline-block;
}
Note: the space between these two child elements can be removed, by removing the space between the div tags:
html
<div class='parent'>
<div class='child inline-block-child'>A</div><div class='child inline-block-child'>B</div>
</div>
css
.inline-block-child {
display: inline-block;
}
html
<div class='parent flex-parent'>
<div class='child flex-child'>A</div>
<div class='child flex-child'>B</div>
</div>
css
.flex-parent {
display: flex;
}
.flex-child {
flex: 1;
}
html
<div class='parent inline-flex-parent'>
<div class='child'>A</div>
<div class='child'>B</div>
</div>
css
.inline-flex-parent {
display: inline-flex;
}
html
<div class='parent grid-parent'>
<div class='child'>A</div>
<div class='child'>B</div>
</div>
css
.grid-parent {
display: grid;
grid-template-columns: 1fr 1fr
}
Apply float:left; to both of your divs should make them stand side by side.
keep it simple
<div align="center">
<div style="display: inline-block"> <img src="img1.png"> </div>
<div style="display: inline-block"> <img src="img2.png"> </div>
</div>
.section {
display: flex;
}
.element-left {
width: 94%;
}
.element-right {
flex-grow: 1;
}
<div class="section">
<div id="dB" class="element-left" }>
Download
</div>
<div id="gB" class="element-right">
Gallery
</div>
</div>
or
.section {
display: flex;
flex-wrap: wrap;
}
.element-left {
flex: 2;
}
.element-right {
width: 100px;
}
<div class="section">
<div id="dB" class="element-left" }>
Download
</div>
<div id="gB" class="element-right">
Gallery
</div>
</div>