Trying to put one div on the right side, other one on the left.
I have 1 div with 2 divs inside.
float: right to parent div and text/image.
<div class="navigation">
<div class="left">
<img src="Logo.png" id="logoImage">
<h1>TWITCHBOOK</h1>
</div>
<div class="right">
<h3>Luka Crypto</h3>
<div id="circle"></div>
</div>
</div>
Codepen: https://codepen.io/Cryptooo/pen/rXGdoP
Two divs on opposite sides.
You can achieve this by styling .navigation as a flexbox with justify-content: space-between;:
.navigation {
display: flex;
justify-content: space-between;
}
.left {
background: red;
}
.right {
background: blue;
}
<div class="navigation">
<div class="left">
<img src="Logo.png" id="logoImage">
<h1>TWITCHBOOK</h1>
</div>
<div class="right">
<h3>Luka Crypto</h3>
<div id="circle"></div>
</div>
</div>
From your codepen, the .navigation element is a flex container. So, remove the float: right on the .right element and add margin-left: auto to "push" it over to the right side.
.right {
display: flex;
align-items: center;
margin-left: auto;
}
This is recommended from the flexbox spec in Aligning with auto margins
.left {
float: left;
}
.right {
float: right;
}
<div>
<div class="left">
<h3>TWITCHBOOK</h3>
</div>
<div class="right">
<h3>Luka Crypto</h3>
</div>
</div>
Related
This question already has answers here:
Two divs side by side - Fluid display [duplicate]
(9 answers)
Expand a div to fill the remaining width
(21 answers)
Closed 1 year ago.
I'm sorry, I speak a little English. I would like see in one line the left and right div.
HTML:
<div id="header">header</div>
<div id="container">
<div id="left"></div>
<div id="right"></div>
</div>
<div id="footer">footer</div>
CSS:
#container { max-width: 1700px; }
#left { width: 100%-314px; }
#right { width: 314px; }
And I would like work if without #right div. See:
HTML (2):
<div id="header">header</div>
<div id="container">
<div id="left"></div>
</div>
<div id="footer">footer</div>
How to?
A possible workaround might be using the span tag, used in your code like this:
<div id="header">header</div>
<div id="container">
<span id="left"></span>
<span id="right"></span>
</div>
<div id="footer">footer</div>
that wont require a fixed size or anything.
Do you mean something like this?
I simply select the divs inside the container and gives them display: inline-block
#container { max-width: 1700px; }
#left { width: 100%-314px; }
#right { width: 314px; }
#container div {
display: inline-block;
}
<div id="header">header</div>
<div id="container">
<div id="left"><p>|left elem|</p></div>
<div id="right"><p>|right elem|</p></div>
</div>
<div id="footer">footer</div>
How about css grid?
.container {
display: grid;
grid-template-columns: 1fr auto;
}
.right {
width: 314px;
}
<div class="container">
<div class="left">A</div>
<div class="right">B</div>
</div>
You can use flexbox, make sure you set display:flex for your container and if you want to align your items with space in between, you can set justify-content:space-between.
#container {
display: flex;
max-width: 1700px;
justify-content: space-between;
}
#left {
background-color: green;
width: 314px;
}
#right {
background-color: red;
width: 314px;
}
<div id="header">header</div>
<div id="container">
<div id="left">left</div>
<div id="right">right</div>
</div>
<div id="footer">footer</div>
This should work for you!
#container {
max-width: 1700px;
display: flex;
}
#left {
width: calc(100% - 314px);
}
#right {
width: 314px;
}
Code Explained:
display:flex : The main idea behind the flex layout is to give the container the ability to alter its items' width/height (and order) to best fill the available space.
calc(100%-314px) : The calc() function performs a calculation that can be used on the property.
I hope this helped you!
You can do this by CSS flex property. div is block level element to get div in one line you can set div to display:inline-block; or inline
check example below.
.flex-container {
display: flex;
height:400px;
flex-flow: column wrap;
background-color: green;
align-content: space-between;
}
.flex-container > div {
background-color: #fff;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
.container{
border:1px solid #000;
height:500px !important;
padding:20px;
}
.left{
margin:10px;
background:#f00;
padding:50px;
color:#fff;
float:left;
}
.right{
margin:10px;
background:#f00;
padding:50px;
color:#fff;
float:right;
}
<h1>Example 1</h1>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
<h1>Example 2</h1>
<div class="container">
<div class="left">
<h3>Left</h3>
</div>
<div class="right">
<h3>Right</h3>
</div>
<div class="left">
<h3>Left</h3>
</div>
<div class="right">
<h3>Right</h3>
</div>
</div>
I want to create a simple two-column layout using four divs. I am restricted and cannot modify the HTML structure. I only can modify the CSS.
I want the second div in the right column to fall directly below the previous right column div. Right now, it pushes to the top of the second left div.
Right now this is what I have in HTML:
<div id="parent">
<div class="left">
Left 1
</div>
<div class="right">
Right 1
</div>
<div class="left">
Left 2
</div>
<div class="right">
Right 2
</div>
</div>
CSS:
.left {
height: 400px;
width: 60%;
float: left;
background-color: red;
display: block;
}
.right {
width: 30%;
float: right;
background-color: green;
display: block;
}
See my fiddle: http://jsfiddle.net/Lun61g7a/2/
Use a flexbox and allow the elements to move to the next "row" when needed
#parent {
display: flex;
flex-wrap: wrap;
}
.left {
height: 400px;
width: 60%;
background-color: red;
display: block;
}
.right {
width: 30%;
background-color: green;
display: block;
}
<div id="parent">
<div class="left">
Left 1
</div>
<div class="right">
Right 1
</div>
<div class="left">
Left 2
</div>
<div class="right">
Right 2
</div>
</div>
I want to align the div on another div. and second div have icon content. my problem is I could not align those divs, one div has an icon the other one is empty.
.outer {
width: 10px;
height: 10px;
}
.inner:before {
content: '\34ds';
left: -6px;
}
<div>
<div class="outer"></div>
<div class="inner"></div>
</div>
Using Flexbox and align-items property:
<div class="container">
<div class="outer"></div>
<div class="inner"></div>
</div>
.container{
display: flex;
align-items: center;
}
More info about flexbox : https://yoksel.github.io/flex-cheatsheet/#flex-grow
.header {
display: flex
}
.logo,
.contribute,
.class 1,
.class 2 {
display: inline-block;
margin: auto 0;
}
<header class="header">
<div class="logo">
</div>
<nav </nav>
<div class="contribute">
</div>
<div class="class 1">
</div>
<div class="class 2">
</div>
</header>
In this suppose .header has display: flex; set.
.logo, .contributor, .class 1, .class 2 has display: inline-block; set and are child to parent .header class, which is flex.
How can we make sure that the .class 1 and .class 2 are right aligned without using the flow property?
Use margin-left: auto; for class1
div,
nav {
display: inline-block;
}
.header {
display: flex;
justify-content: space-between;
}
<header class="header">
<div class="left">
<div class="logo">1</div>
<nav></nav>
</div>
<div class="contribute">2</div>
<div class="right">
<div class="class1">3</div>
<div class="class2">4</div>
</div>
</header>
Simply add margin-left: auto; to .class1 and it will push itself and .class2 to the right
I fixed your class names as CSS isn't happy with a class name of only one digit, like the 1 in class 1, so either remove the space (which I did in below sample) or add i.e. nr (nr1). Also, as the items in a flex container is flex items, the display: inline-block will have no effect.
.header {
display: flex
}
.class1 {
margin-left: auto;
}
<header class="header">
<div class="logo">
logo
</div>
<nav>
</nav>
<div class="contribute">contribute
</div>
<div class="class1">class 1
</div>
<div class="class2">class 2
</div>
</header>
I have the following HTML structure:
<div id="outer">
<div id="left">
<div id="leftContainer"><span>bla</span><span>bla</span><span>bla</span><span>bla</span></div>
</div>
<div id="right">
<div class="item"><span>item text 1</span></div>
<div class="item"><span>item text 2</span></div>
<div class="item"><span>item text 3</span></div>
<div class="item"><span>item text 4</span></div>
<div class="item"><span>item text 5</span></div>
<div class="item"><span>item text 6</span></div>
</div>
</div>
With the corresponding styles:
#left, #right {
display: inline-block;
}
.item {
display:inline-block;
padding: 0px 5px;
}
#right {
position: absolute;
/*right:0px;*/ /*this little thing causes my problems*/
text-align:right;
border-color: red;
}
I need the right div to be right aligned. For that I set right:0px; but then the right element overlap the left div. If right:0px; is not set, then the item elements will break on a new line (which is part of my requirements) but the right element will be, obviously, left aligned. See the fiddle, comment/uncomment right:0px; and play with the width of the result panel.
Is the a way of right aligning the right div without overlapping? Floating is currently not a solution.
I'm not entirely clear on how the right div is supposed to behave after the 'collision' point but flexbox does allow for the alignment you wanted without the overlap that seems to be problematical for you.
#outer {
position: relative;
display: flex;
justify-content: space-between;
}
#outer {
position: relative;
display: flex;
justify-content: space-between;
}
div {
border: 1px solid black;
}
#left div span {
margin: 0px 5px;
display: inline-block;
}
.item {
display: inline-block;
padding: 0px 5px;
}
#right {
text-align: right;
border-color: red;
}
<div id="outer">
<div id="left">
<div id="leftContainer">
<span>bla</span>
<span>bla</span>
<span>bla</span>
<span>bla</span>
</div>
</div>
<div id="right">
<div class="item"><span>item text 1</span>
</div>
<div class="item"><span>item text 2</span>
</div>
<div class="item"><span>item text 3</span>
</div>
<div class="item"><span>item text 4</span>
</div>
<div class="item"><span>item text 5</span>
</div>
<div class="item"><span>item text 6</span>
</div>
</div>
</div>
JSFiddle Demo
As i understand you need something like following.
Use display:table-cell will solve your issue:
#left, #right {
display: table-cell;
}
Check Fiddle Here.
Give width: 100%; to .right wills stick right div to right align.
Check Updated Fiddle Here.
Use the flexbox model display: flex for your #right element.
#outer {
overflow: hidden;
}
#left {
float: left;
min-width: 66%;
background-color: #69f;
}
#right {
min-width: 34%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-end;
align-items: stretch;
}
.item {
display: inline-block;
}
See example here: http://jsbin.com/qalilu/3/edit. I've added a min-width constraint, which may be useful.
See browser support: http://caniuse.com/#search=flexbox
And a guide: https://css-tricks.com/snippets/css/a-guide-to-flexbox/