I need to position 3 divs inside a container and I need first div with specific width second next to it to fill remaining space and third which would be on the right side and above second div.
This is what I got so far https://jsfiddle.net/96v5zdra/
<div class="wrapper">
<div class="first">1</div>
<div class="second">Some lorem ipsum long text</div>
<div class="third">3</div>
</div>
.wrapper {
width: 200px;
border: solid 1px black;
}
.first {
width: 50px;
background-color: red;
float: left;
}
.second {
background-color: green;
float: left;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.third {
background-color: rgba(255, 0, 0, 0.4);
width: 50px;
float: right;
}
How would such css style look?
body {
padding:0;
margin:0;
}
.container {
width:600px;
height:200px;
background:#fff;
border:10px solid #000;
margin:100px auto 0;
position:relative;
display:flex;
}
.red {
height:100%;
width:30%;
background:red;
border-right:10px solid #000;
box-sizing:border-box;
/* the following codes for numbers. deletable.*/
display:flex;
justify-content:center;
align-items:center;
font-size:90px;
font-family:monospace;
color:#fff;
}
.green {
heigth:100%;
width:70%;
background:green;
box-sizing:border-box;
/* the following codes for numbers. deletable.*/
display:flex;
justify-content:center;
align-items:center;
font-size:90px;
font-family:monospace;
color:#fff;
}
.green_right{
position:absolute;
right:0;
top:0;
background:transparent;
border:10px dashed #000;
height:100%;
width:30%;
box-sizing:border-box;
/* the following codes for numbers. deletable.*/
display:flex;
justify-content:center;
align-items:center;
font-size:90px;
font-family:monospace;
color:#fff;
}
<div class="container">
<div class="red">
1
</div>
<div class="green">
2
<div class="green_right">
3
</div>
</div>
</div>
This could be a way with some bootstrap:
HTML:
<div class="container">
<div class="wrapper row">
<div class="first">Some<br> lorem <br>ipsum <br>long <br>text</div>
<div class="second col">Some<br> lorem <br>ipsum <br>long <br>text</div>
<div class="third">Some<br> lorem <br>ipsum <br>long <br>text</div>
</div>
</div>
CSS:
.wrapper {
border: solid 1px black;
position:relative;
}
.first {
background-color: red;
width: 50px;
}
.second {
background-color: green;
}
.third {
background-color: rgba(255, 0, 0, 0.4);
position: absolute;
right: 0;
}
Live example: https://codepen.io/PMertgen/pen/zMyjQd
Related
How do I make this layout with CSS? The parent div is set to max-width 1500px and it is a display flex and a gap 18px with two children #text, #news... news is overlapping to touch the right edge of whatever screen the user has.
html{
border:1px solid red;
}
html:after{
content:"HTML";
color:gray;
}
.main{
display:flex;
flex-flow:row;
max-width:350px;
color:black;
}
.main .child-1 {
flex: 1 1 40%;
border:1px solid #000
}
.main .child-2 {
flex: 1 1 100vw;
border:1px solid #000;
}
.main ul p {
display:block;
width 250px; // Whatever
}
ul{
list-style:none;
display:flex;
}
<div class="main">
<p class="child-1">Some lorem Text</p>
<div class="child-2">
<ul>
<li><p>1</p></li>
<li><p>2</p></li>
<li><p>3</p></li>
<li><p>4</p></li>
</ul>
</div>
</div>
you can use negative margin to achieve the goal.
div{
border: 1px solid;
min-height: 100px;
}
.parent{
display: flex;
max-width: 250px;
padding: 20px;
column-gap: 20px;
}
.text{
width: 25%;
}
.news{
width:75%;
margin-right: -20px;
}
<div class="parent">
<div class="text"></div>
<div class="news"></div>
</div>
#myDiv {
display: inline-block;
border:1px solid red;
width:200px;
}
#myImg {
max-height:100%;
max-width:100%;
}
#anotherDiv {
display:inline-block;
border:1px solid blue;
height:100px;
width:50px;
}
<div id="myDiv">
<img src='https://i.imgur.com/rw9ypWD.png' id="myImg">
<div id="anotherDiv">
</div>
</div>
I want to fit the image height to its container div.
Using height:100%; works only when the container have a fixed height.
Simply add display:flex to container to get the stretch alignment by default:
#myDiv {
display: inline-flex;
border:1px solid red;
width:200px;
}
#anotherDiv {
display:inline-block;
border:1px solid blue;
height:100px;
width:50px;
}
<div id="myDiv">
<img src='https://i.imgur.com/rw9ypWD.png' id="myImg">
<div id="anotherDiv">
</div>
</div>
A different result with display:grid:
#myDiv {
display: inline-grid;
grid-auto-flow:column; /* column flow */
justify-content: flex-start; /* align everything to left */
border:1px solid red;
width:200px;
}
#myImg {
height:100%; /* image 100% height of the div */
}
#anotherDiv {
display:inline-block;
border:1px solid blue;
height:100px;
width:50px;
}
<div id="myDiv">
<img src='https://i.imgur.com/rw9ypWD.png' id="myImg">
<div id="anotherDiv">
</div>
</div>
<div id="myDiv">
<img src='https://i.imgur.com/rw9ypWD.png' id="myImg">
<div id="anotherDiv" style="height:50px">
</div>
</div>
Here the another way without using flex: I will recommend that display:flex; will be the good and easy one.
#myDiv {
display: inline-block;
border: 1px solid red;
width: 200px;
position: relative;
padding-left: 22px;
}
#myImg {
position: absolute;
left: 0;
height: 100%;
}
#anotherDiv {
display: inline-block;
border: 1px solid blue;
height: 100px;
width: 50px;
}
<div id="myDiv">
<img src="https://i.imgur.com/rw9ypWD.png" id="myImg" />
<div id="anotherDiv"></div>
</div>
I am creating a html layout with a sidebar. But my header and content are appearing underneath my sidebar instead of next to it.
.container { position:relative; padding:10px; top:0px; right: 0; left: 0; height: 1200px;}
#sidebar {
position:relative;
top:0; bottom:0; left:0;
width:200px;
height: 1000px;
background: gray;
}
#header { border:1px solid #000; height:300px;
padding:10px; margin-left: 200px;
}
#content { border:1px solid #000; height:700px; margin-left: 200px;;
padding:10px;
}
<div class="container">
<div id="sidebar">
Link1
</div>
<div id="header">
<h2 class="title">Title</h2>
<h3>Header content</h3>
</div>
<div id="content">
<center>
<p>Hello</p>
</center>
</div>
</div>
Thanks
Add "display: inline-block;" to the elements that you want to display next to each other.
Just add
#sidebar {
float:left;
}
.container { position:relative; padding:10px; top:0px; right: 0; left: 0; height: 1200px;}
#sidebar {
position:relative;
top:0; bottom:0; left:0;
width:200px;
height: 1000px;
background: gray;
float:left;
}
#header { border:1px solid #000; height:300px;
padding:10px; margin-left: 200px;
}
#content { border:1px solid #000; height:700px; margin-left: 200px;;
padding:10px;
}
<div class="container">
<div id="sidebar">
Link1
</div>
<div id="header">
<h2 class="title">Title</h2>
<h3>Header content</h3>
</div>
<div id="content">
<center>
<p>Hello</p>
</center>
</div>
</div>
I have introduced .inner-container and defined two flexboxes. CSS is simplified.
* {
box-sizing: border-box;
}
.container {
display: flex;
}
.inner-container {
display: flex;
flex-flow: column;
width: 80%;
}
#sidebar {
width: 20%;
background: gray;
}
#header {
border: 1px solid black;
height: 300px;
padding: 10px;
}
#content {
border: 1px solid black;
padding: 10px;
}
<div class="container">
<div id="sidebar">
Link1
</div>
<div class="inner-container">
<div id="header">
<h2 class="title">Title</h2>
<h3>Header content</h3>
</div>
<div id="content">
<center>
<p>Hello</p>
</center>
</div>
</div>
</div>
you should just try editing the
position: fixed
this will solve your problem.
You should try to change your position: relative; to position: absolute;. You can then adjust the position of your divs using a margin.
.container {
position:relative;
padding:10px;
top:0px;
right: 0;
left: 0;
height: 1200px;
}
#sidebar {
position:absolute;
top:0; bottom:0; left:0;
width:200px;
height: 1000px;
background: gray;
}
#header { border:1px solid #000; height:300px;
padding:10px; margin-left: 200px;
margin-top:-10px;
}
#content {
border:1px solid #000;
height:700px;
margin-left: 200px;
padding:10px;
}
<div class="container">
<div id="sidebar">
Link1
</div>
<div id="header">
<h2 class="title">Title</h2>
<h3>Header content</h3>
</div>
<div id="content">
<center>
<p>Hello</p>
</center>
</div>
</div>
Working fiddle: https://jsfiddle.net/khs8j3gu/2/
Good luck!
I've the web page like the below layout.
The content of css file is following.
#green{
border:20px solid #3D3;
float:left;
display:block;
}
#orange{
width:100px;
height:100px;
border:10px solid orange;
float:left;
}
.child{
border:10px solid black;
display:inline-block;
margin:0px;
}
.parent{
border:10px solid #f00;
display:table;
padding:0px;
margin:0px;
}
.clear{
clear:both;
}
The html content is following.
<div class="parent">
<div class="child">
<div id='green'> </div>
<div id="orange"></div>
<div class="clear"> </div>
</div>
</div>
I've gotten the rendering result as following.
why do I have white gap in the layout?
I've not added any white color gap in the div tag.
Please help me.
Thanks.
that is happened because you set parent display property to table and child display property to inline-block . just remove display:inline-block; property of your div.child ,it works fine.I'm added the snippet below.
#green{
border:20px solid #3D3;
float:left;
display:block;
}
#orange{
width:100px;
height:100px;
border:10px solid orange;
float:left;
}
.child{
border:10px solid black;
/*display:inline-block;*/
margin:0px;
}
.parent{
border:10px solid #f00;
display:table;
padding:0px;
margin:0px;
}
.clear{
clear:both;
}
<div class="parent">
<div class="child">
<div id='green'> </div>
<div id="orange"></div>
<div class="clear"> </div>
</div>
</div>
Fighting the Space Between Inline Block Elements ,The reason you get the spaces is because, well, you have spaces between the elements (a line break and a few tabs counts as a space, just to be clear). Minimized HTML will solve this problem, you can simply fix this font-size:0 property ,
check the reference site https://css-tricks.com/fighting-the-space-between-inline-block-elements/
.parent {
font-size:0;
}
see the attached snippet
#green {
border: 20px solid #3D3;
float: left;
display: block;
}
#orange {
width: 100px;
height: 100px;
border: 10px solid orange;
float: left;
}
.child {
border: 10px solid black;
display: inline-block;
margin: 0px;
}
.parent {
border: 10px solid #f00;
display: table;
padding: 0px;
margin: 0px;
font-size:0;
}
.clear {
clear: both;
}
<div class="parent">
<div class="child">
<div id='green'> </div>
<div id="orange"></div>
<div class="clear"> </div>
</div>
</div>
In my site layout I'm using a negative margin to move my left column up next to my banner so it overlaps. The problem is I don't know what the banner's height will be in the final version. At first I used position:absolute on the left column, but that won't work because it needs to be part of the layout and push down the footer if necessary. I'd like to know how to position the left column to the top of the page, because then I could set a top margin the same height as the header since that won't change height. I could figure this out with javascript but I'd like to avoid that and use pure css.
https://jsfiddle.net/z77fwaj7/1/
#Header
{
background-color: gray;
height: 50px;
}
#Banner
{
background-color: orange;
height: 50px;
}
#Content
{
background-color:white;
border:1px solid red;
max-width:500px;
margin:0px auto;
}
#LeftColumn
{
float:left;
height:200px;
width:25%;
background-color: blue;
margin-top:-51px;/*this needs to be dynamic*/
}
#MiddleColumn
{
float:left;
height:200px;
width:45%;
background-color: yellow;
}
#RightColumn
{
float:left;
height:250px;
width:30%;
background-color: green;
}
#Footer
{
background-color: gray;
height: 50px;
}
<div id="Header">header</div>
<div id="Banner">banner</div>
<div id="Content">
<div id="LeftColumn">left</div>
<div id="MiddleColumn">middle</div>
<div id="RightColumn">right</div>
<div style="clear:both;"></div>
</div>
<div id="Footer">footer</div>
Is this Ok.
<style type="text/css">
#Header
{
background-color: gray;
height: 50px;
}
#Banner
{
background-color: orange;
height: 50px;
}
#Content
{
background-color:white;
border:1px solid red;
max-width:500px;
margin:0px auto;
}
#LeftColumn
{
float:left;
height:200px;
width:25%;
background-color: blue;
margin-top:0px;
}
#MiddleColumn
{
float:left;
height:200px;
width:45%;
background-color: yellow;
}
#RightColumn
{
float:left;
height:250px;
width:30%;
background-color: green;
}
#Footer
{
background-color: gray;
height: 50px;
}
</style>
<div>
<div id="Header">header</div>
<div id="Banner">banner</div>
<div id="Content">
<div id="LeftColumn">left</div>
<div id="MiddleColumn">middle</div>
<div id="RightColumn">right</div>
<div ></div>
</div>
<div id="Footer" style="clear:both;">footer</div>
</div>
If anyone is curious I had to change my layout in order to get it working without javascript. BackgroundBanner won't change height when Banner shrinks, but in my case that doesn't matter since it will be out of view anyway.
https://jsfiddle.net/z77fwaj7/4/
css:
#Header
{
background-color: gray;
height: 50px;
}
#Background
{
position:absolute;
width:100%;
z-index:-1;
}
#BackgroundBanner
{
height: 50px;
background-color:orange;
}
#Banner
{
float:left;
background-color: orange;
height: 50px;
width:75%;
}
#Content
{
background-color:white;
border:1px solid red;
max-width:500px;
margin:0px auto;
}
#LeftColumn
{
float:left;
height:200px;
width:25%;
background-color: blue;
}
#MiddleColumn
{
float:left;
height:200px;
width:45%;
background-color: yellow;
}
#RightColumn
{
float:left;
height:250px;
width:30%;
background-color: green;
}
#Footer
{
background-color: gray;
height: 50px;
}
html:
<div id="Header">header</div>
<div id="Background">
<div id="BackgroundBanner"></div>
</div>
<div id="Content">
<div id="LeftColumn">left</div>
<div id="Banner">banner</div>
<div id="MiddleColumn">middle</div>
<div id="RightColumn">right</div>
<div style="clear:both;"></div>
</div>
<div id="Footer">footer</div>
As a conclusion:
Using a value of an element on another element in css is not possible. (as far as i know)
So there are two solutions:
Change the layout.
Use javascript.
I would prefer the second. Don't know why it's such a shame to do so.
A short simple javascript is better then mess up the layout. (In my opinion)