 How to get all blue background divs to align to the left and get all the red divs to align to the right using the css fl
By : user3759701
Date : March 29 2020, 07:55 AM
it should still fix some issue I would create 2 column elements to wrap the left column s and the right column s.
|
 How do I align two divs horizontally without the left one floating left?
By : user3491372
Date : March 29 2020, 07:55 AM
it helps some times You can also use display:inline-block; on your child elements. View this Fiddle for an example of how to accomplish this. HTML: code :
<div class="centerpanel">
<div class="leftpanel">Left</div><div class="rightpanel">Right</div>
</div>
div.centerpanel {
font-size: 28px;
width:100%;
height:100%;
text-align: center;
}
.leftpanel {
background:red;
display:inline-block;
width:50%;
}
.rightpanel {
background:blue;
display:inline-block;
width:50%;
}
|
Align 4 divs left and right?
By : K0ld Viper
Date : March 29 2020, 07:55 AM
With these it helps I found it! ( Hat tip to this post) which basically says take the float off the right containers and they will take up the available space left around the two floated left divs: code :
* {
box-sizing: border-box;
}
.container{
width:100%;
outline: 2px solid #000;
padding: 5px;
}
.half {
width: 50%;
}
.align-left{
width:60%;
float: left;
display: inline-block;
outline: 2px solid #000;
padding: 5px;
}
.align-right{
width:30%;
display: inline-block;
outline: 2px solid #000;
padding: 5px;
}
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>test</title>
</head>
<body>
<div>
<header>
<header>
<div class="conainer">
<div class="align-left">
1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1
1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1
1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1
</div>
<div class="align-right">
2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2
</div>
<div class="align-left">
3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3
</div>
<div class="align-right" style="color:red">
4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4
</div>
</div>
</div><!-- #page -->
</body>
</html>
|
How do I align two divs on the left and right vertically?
By : jklf
Date : March 29 2020, 07:55 AM
hop of those help? I have a problem trying to align my dropdown list vertically with my textarea on the left somehow. I do not know why it is clashing together. , Here you go : HTML: code :
<div class="ExeDropdown">
Select an exercise:
<select name="ProgExe">
<option value="exe1">Exercise 1</option>
<option value="exe2">Exercise 2</option>
</select>
</div>
<div class="clear"></div>
<div class="txt1" >
<p>Write your source code here:</p>
<textarea id="myTextArea" rows="5" cols="40" name="txtInput" >
</textarea>
</div>
.clear{clear:both;}
|
How can I align right and left of 2 divs
By : user1763389
Date : March 29 2020, 07:55 AM
will be helpful for those in need You need to structure your html, css according to their rule. Inside container should have row and inside row should have col. So all the element inside will have the same padding, margin and it will align correctly. code :
<div class="section">
<div class="container">
<div class="row">
<div class="col">
<div class="maskbanner">
</div>
</div>
</div>
</div>
</div>
.row.custom-row {
margin-left: -0.75rem;
margin-right: -0.75rem;
}
<div class="section">
<div class="container">
<div class="row custom-row">
.. elements ..
</div>
</div>
</div>
|
» 
code :
Related Posts :