I would like to have two tags side-by-side as if being two columns.
So far I have
<div id="wrapper">
<div id="1">text here</div>
<div id="2">text here</div>
<div style="clear:both"></div>
</div>
What I'm having difficulty with is the CSS for the divs. Any help?
Check out the float property.
Quick example:
#1, #2 {
float: left;
width: 49%;
}
Check out this beginner tutorial on CSS Floats.
May be you can try:
div#wrapper {
display: table;
}
div#wrapper div {
display: table-cell;
padding: 5px;
}
or this one:
div#wrapper div {
display: inline-block;
}
As a start:
<div id="wrapper">
<div style="float:left;" id="1">text here</div>
<div style="float:left;" id="2">text here</div>
<div style="clear:both"></div>
</div>
CSS:
#1 {
float: left;
width: 50%;
}
#2 {
float: left;
width: 50%;
}
You could use float:left in conjunction with overflow-x:hidden; like so:
#1 {
float:left
}
#2 {
overflow-x:hidden;
}
add the following to your divs:
style="float:left"
#1, #2 {
display: inline-block;
}
Given that both #1 and #2 divs have a total width of not greater than the parent div.
If you use float, you will end up changing them to inline-block once you have to position a child div into absolute.
Related
Now I can just put the ABC div to the right but below Body div. How do I put ABC div below Header div? Overlapping is needed.
<div style="width:500px;margin:0 auto;">
<div style="background-color:yellow;height:100px">Header</div>
<div style="background-color:aquamarine; height: 400px">Body</div>
<div style="background-color:red;width:100px;margin-left:auto">ABC</div>
</div>
I have added 2 answers. 1st is for external stylesheet , 2nd is for inline styling (just like how you wrote your code).
Firstly, don't use inline styling. If possible, always use external stylesheet.
Now, for your question, use relative position for the parent and absolute for the child. In this case, parent is your main container and child is that ABC div.
Try this:
#container {
width: 500px;
margin: 0 auto;
position: relative;
}
.header {
background-color:yellow;
height:100px
}
.body {
background-color:aquamarine;
height: 400px;
}
.abc {
background-color:red;
width:100px;
position: absolute;
top: 100px;
right: 0;
}
<div id="container">
<div class="header">Header</div>
<div class="body">Body</div>
<div class="abc">ABC</div>
</div>
Explanation:
Since your .header is 100px, you can set the .abc to top: 100px; and set the right: 0 to move it to the extreme right within the parent since .abc is absolutely positioned to its parent.
If you are only allowed to use inline-styling, then try this:
<div style="width:500px;margin:0 auto;position:relative;">
<div style="background-color:yellow;height:100px">Header</div>
<div style="background-color:aquamarine; height: 400px">Body</div>
<div style="background-color:red;width:100px;position:absolute;top:100px;right:0;">ABC</div>
</div>
I added float: right to place the ABC div on the BODY div (overlap) and interchanged the position of the div BODY and ABC
<div style="width:500px;margin:0 auto;">
<div style="background-color:yellow;height:100px">Header</div>
<div style="background-color:red;width:100px;float: right;">ABC</div>
<div style="background-color:aquamarine; height: 400px">Body</div>
</div>
go to https://www.w3schools.com/css/css_positioning.asp for more information
To make layout you can use flexbox utilities. It's the most common and probably the easiest way to make layout.
I hope this is what you need.
For more infos check DOCS
*,
*::before,
*::after {
box-sizing: border-box;
}
.container-fluid{
width:100%;
}
header{
width:100%;
height:100px;
background:yellow
}
.row{
display:flex;
flex-wrap:wrap;
}
.col-left{
width:100%;
flex:0 0 75%;
max-width:75%;
background:blue;
height:100px
}
.col-right{
width:100%;
flex:0 0 25%;
max-width:25%;
background:red;
}
<div class="container-fluid">
<header></header>
<div class="row">
<div class="col-left"></div>
<div class="col-right"></div>
</div>
</div>
So I have two divs that contain text and I want to have them horizontally. I tried using the property display: inline-block but it doesn't seem to work.
Here is a jsfiddle of my attempt.
I think what you want to use is a ul instead of divs and that will allow you to have them all on the same line, if thats what you meant?
.row{
list-style: none;
}
.row li{
display: inline-block;
padding: 0 10px;
}
<ul class="row">
<li>A108 Adam Street</li>
<li>New York, NY 535022</li>
<li>info#exmaple.com</li>
</ul>
I think this is what you are trying for:
.text{
display: inline-block
}
.text1{
float: left;
}
.text2{
float: right;
}
<div >
<div class="ion-ios-location-outline text text1">
<i><p>A108 Adam Street<br>New York, NY 535022</p></i>
</div>
<div class="ion-ios-email-outline text text2">
<i><p>info#example.com</p></i>
</div>
</div>
If correct, you can reply for further explaination
Default of div is display: block; it makes the div get full width of page. So if you want to make 2 divs stay horizontally. You should set display of div to inline-block;
div {
display: inline-block;
}
.text{
display: inline-block
}
.text1{
float: left;
}
.text2{
float: right;
}
Just give the parent div a class and apply text-align:center property
.parent{
text-align:center;
}
<div class='parent'>
<div >
<i class="ion-ios-location-outline "></i>
<p>A108 Adam Street<br>New York, NY 535022</p>
</div>
<div>
<i class="ion-ios-email-outlinetext " ></i>
<p>info#example.com</p>
</div>
</div>
A div by default has its display attribute set to "block". So even if you are setting the display property of of its child tag, to "inline-block", that would not work.
Setting the parent divs to "inline-block" instead is probably what you need.
Here is the code for your reference (You do not need text, text1 and text2 classes. I've named the class you require as "display-inline-block")
<div>
<div class="display-inline-block">
<i class="ion-ios-location-outline"></i>
<p>A108 Adam Street<br>New York, NY 535022</p>
</div>
<div class="display-inline-block">
<i class="ion-ios-email-outline"></i>
<p>info#example.com</p>
</div>
</div>
And the following css
.display-inline-block {
display: inline-block;
}
P.S. You can also use the bootstrap css class "d-inline-block" instead, if you are using bootstrap in your project, rather than defining the custom class "display-inline-block".
Use of float Property :
.text {
display: inline-block
}
.text1 {
float: left;
}
.text2 {
float: right;
}
div div:last-child {
float:right;
}
div div:first-child {
float: left;
}
<div >
<div>
<i class="ion-ios-location-outline text text1"></i>
<p>A108 Adam Street<br>New York, NY 535022</p>
</div>
<div>
<i class="ion-ios-email-outlinetext text2" ></i>
<p>info#example.com</p>
</div>
</div>
I'd like to float a <p> to the bottom of a <div>, but as far as I can tell, I can't set the parent <div> to position:relative or position:absolute without mucking up my layout, which uses the Susy framework for Compass.
How else can I do this?
Relevant HTML is:
<header>
<div class='grid'>
<div class='logo'>
<img src='/images/logo3.png'>
</div>
<div class='tagline'>
<p>Fast Facts About Your Website, Your Competition, And Best Practice</p>
</div>
</div>
</header>
Relevant CSS is:
header {
clear: both;
}
.grid .logo {
width: 30.43478%;
float: left;
margin-right: 4.34783%;
display: inline;
padding-left: 3.75em;
margin: 0;
}
.grid .tagline {
width: 65.21739%;
float: right;
margin-right: 0;
#margin-left: -3.75em;
display: inline;
}
As far as I understand from your question you need <p> below your logo so clear your float after the logo div My Fiddle
<div style="clear: both;"></div>
<div class='tagline'>
<p>Fast Facts About Your Website, Your Competition, And Best Practice</p>
</div>
And why are you using floating widths? does it need to be so accurate? and why display: inline; in .logo and .tagline
Sorry guys for the really simple question but I have tried to float one div left and one right with predefined widths along these lines
<div style="width: 100%;">
<div style="float:left; width: 80%">
</div>
<div style="float:right;">
</div>
</div>
Although this 'mostly' works it seems to mess up the other elements on the page below it.
So what is the correct why to split a HTML page vertically into two parts using CSS without effecting other elements on the page?
you can use..
<div style="width: 100%;">
<div style="float:left; width: 80%">
</div>
<div style="float:right;">
</div>
</div>
<div style="clear:both"></div>
now element below this will not be affected.
Just add overflow:auto; to parent div
<div style="width: 100%;overflow:auto;">
<div style="float:left; width: 80%">
</div>
<div style="float:right;">
</div>
</div>
Working Demo
I guess your elements on the page messes up because you don't clear out your floats, check this out
Demo
HTML
<div class="wrap">
<div class="floatleft"></div>
<div class="floatright"></div>
<div style="clear: both;"></div>
</div>
CSS
.wrap {
width: 100%;
}
.floatleft {
float:left;
width: 80%;
background-color: #ff0000;
height: 400px;
}
.floatright {
float: right;
background-color: #00ff00;
height: 400px;
width: 20%;
}
There can also be a solution by having both float to left.
Try this out:
Working Demo
P.S. This is just an improvement of Ankit's Answer
Check out this fiddle:
http://jsfiddle.net/G6N5T/1574/
CSS/HTML code:
.wrap {
width: 100%;
overflow:auto;
}
.fleft {
float:left;
width: 33%;
background:lightblue;
height: 400px;
}
.fcenter{
float:left;
width: 33%;
background:lightgreen;
height:400px;
margin-left:0.25%;
}
.fright {
float: right;
background:pink;
height: 400px;
width: 33.5%;
}
<div class="wrap">
<!--Updated on 10/8/2016; fixed center alignment percentage-->
<div class="fleft">Left</div>
<div class="fcenter">Center</div>
<div class="fright">Right</div>
</div>
This uses the CSS float property for left, right, and center alignments of divs on a page.
Alternatively, you can also use a special function known as the linear-gradient() function to split browser screen into two equal halves.
Check out the following code snippet:
body
{
background-image:linear-gradient(90deg, lightblue 50%, skyblue 50%);
}
Here, linear-gradient() function accepts three arguments
90deg for vertical division of screen.( Similarly, you can use 180deg for horizontal division of screen)
lightblue color is used to represent the left half of the screen.
skyblue color has been used to represent the right half of the split screen.
Here, 50% has been used for equal division of the browser screen. You can use any other value if you don't want an equal division of the screen.
Hope this helps. :)
Happy Coding!
Here is the flex-box approach:
CSS
.parent {
display:flex;
height:100vh;
}
.child{
flex-grow:1;
}
.left{
background:#ddd;
}
.center{
background:#666;
}
.right{
background:#999;
}
HTML
<div class="parent">
<div class="child left">Left</div>
<div class="child center">Center</div>
<div class="child right">Right</div>
</div>
You can try the same in js fiddle.
I know how to make 2 divs float side by side, simply float one to the left and the other to the right.
But how to do this with 3 divs or should I just use tables for this purpose?
Just give them a width and float: left;, here's an example:
<div style="width: 500px;">
<div style="float: left; width: 200px;">Left Stuff</div>
<div style="float: left; width: 100px;">Middle Stuff</div>
<div style="float: left; width: 200px;">Right Stuff</div>
<br style="clear: left;" />
</div>
The modern way is to use the CSS flexbox, see support tables.
.container {
display: flex;
}
.container > div {
flex: 1; /*grow*/
}
<div class="container">
<div>Left div</div>
<div>Middle div</div>
<div>Right div</div>
</div>
You can also use CSS grid, see support tables.
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr; /* fraction*/
}
<div class="container">
<div>Left div</div>
<div>Middle div</div>
<div>Right div</div>
</div>
It is same way as you do for the two divs, just float the third one to left or right too.
<style>
.left{float:left; width:33%;}
</style>
<div class="left">...</div>
<div class="left">...</div>
<div class="left">...</div>
float them all left
make sure a width is specified that they can all fit in their container (either another div or the window), otherwise they will wrap
<br style="clear: left;" />
that code that someone posted up there, it did the trick!!!
when i paste it just before closing the Container DIV, it helps clear all subsequent DIVs from overlapping with the DIVs i've created side-by-side at the top!
<div>
<div class="left"></div>
<div class="left"></div>
...
...
<div class="left"></div>
<!-- then magic trick comes here -->
<br style="clear: left;" />
</div>
tadaa!! :)
Float all three divs to the left. Like here:
.first-div {
width:370px;
height:150px;
float:left;
background-color:pink;
}
.second-div {
width:370px;
height:150px;
float:left;
background-color:blue;
}
.third-div {
width:370px;
height:150px;
float:left;
background-color:purple;
}
<style>
.left-column
{
float:left;
width:30%;
background-color:red;
}
.right-column
{
float:right;
width:30%;
background-color:green;
}
.center-column
{
margin:auto;
width:30%;
background-color:blue;
}
</style>
<div id="container">
<section class="left-column">THIS IS COLUMN 1 LEFT</section>
<section class="right-column">THIS IS COLUMN 3 RIGHT</section>
<section class="center-column">THIS IS COLUMN 2 CENTER</section>
</div>
the advantage of this way is you can set each column width independant of the other as long as you keep it under 100%, if you use 3 x 30% the remaining 10% is split as a 5% divider space between the collumns
I usually just float the first to the left, the second to the right. The third automatically aligns between them then.
<div style="float: left;">Column 1</div>
<div style="float: right;">Column 3</div>
<div>Column 2</div>
you can float: left for all of them and set the width to 33.333%
try to add "display: block" to the style
<style>
.left{
display: block;
float:left;
width:33%;
}
</style>
<div class="left">...</div>
<div class="left">...</div>
<div class="left">...</div>
I didn't see the bootstrap answer, so for what's it's worth:
<div class="col-xs-4">Left Div</div>
<div class="col-xs-4">Middle Div</div>
<div class="col-xs-4">Right Div</div>
<br style="clear: both;" />
let Bootstrap figure out the percentages.
I like to clear both, just in case.
I prefer this method, floats are poorly supported in older versions of IE (really?...)
.column-left{ position:absolute; left: 0px; width: 33.3%; background: red; }
.column-right{position:absolute; left:66.6%; width: 33.3%; background: green; }
.column-center{ position:absolute; left:33.3%; width: 33.3%; background: yellow; }
UPDATED :
Of course, to use this technique and due to the absolute positioning you need to enclose the divs on a container and do a postprocessing to define the height of if, something like this:
jQuery(document).ready(function(){
jQuery('.main').height( Math.max (
jQuery('.column-left').height(),
jQuery('.column-right').height(),
jQuery('.column-center').height())
);
});
Not the most amazing thing in the world, but at least doesn't break on older IEs.
But does it work in Chrome?
Float each div and set clear;both for the row. No need to set widths if you dont want to. Works in Chrome 41,Firefox 37, IE 11
Click for JS Fiddle
HTML
<div class="stack">
<div class="row">
<div class="col">
One
</div>
<div class="col">
Two
</div>
</div>
<div class="row">
<div class="col">
One
</div>
<div class="col">
Two
</div>
<div class="col">
Three
</div>
</div>
</div>
CSS
.stack .row {
clear:both;
}
.stack .row .col {
float:left;
border:1px solid;
}
Here's how I managed to do something similar to this inside a <footer> element:
<div class="content-wrapper">
<div style="float:left">
<p>© 2012 - #DateTime.Now.Year #Localization.ClientName</p>
</div>
<div style="float:right">
<p>#Localization.DevelopedBy Leniel Macaferi</p>
</div>
<div style="text-align:center;">
<p>☎ (24) 3347-3110 | (24) 8119-1085 ✉ #Html.ActionLink(Localization.Contact, MVC.Home.ActionNames.Contact, MVC.Home.Name)</p>
</div>
</div>
CSS:
.content-wrapper
{
margin: 0 auto;
max-width: 1216px;
}
#Leniel this method is good but you need to add width to all the floating div's. I would say make them equal width or assign fixed width. Something like
.content-wrapper > div { width:33.3%; }
you may assign class names to each div rather than adding inline style, which is not a good practice.
Be sure to use a clearfix div or clear div to avoid following content remains below these div's.
You can find details of how to use clearfix div here
display: table;If text needs to appearas if on the same line
In other words; if the vertical alignment of text in each <div> needs to be identical, one can attempt a modern retro throwback to yesteryear with the somewhat controversial table styling:
.container {display: table;}
div {display: table-cell;}
This proved to be quite useful to format CSL-styled citations in Pandoc, as shown below:
div.csl-bib-body {}
div.csl-entry {
margin-top: 1rem;
display: table;
}
div.csl-left-margin {
display: table-cell;
}
div.csl-right-inline {
padding-left: 1ex;
display: table-cell;
}
The citation number div and the citation data div are now shown at the exact same height.