This question already has answers here:
Why is there vertical scroll on the main container?
(4 answers)
Closed 5 years ago.
I am creating a row of <div> elements using the following code:
HTML:
.row_1_element{
text-align:center;
font-size:3vw;
width:20vw;
float:left;
}
<div id="row_1">
<div class="row_1_element">
Menu
</div>
<div class="row_1_element">
user
</div>
<div class="row_1_element">
profile
</div>
<div class="row_1_element">
?
</div>
<div class="row_1_element">
?
</div>
<div>
The problem is that all 5 <div> elements do not fit into one row across the screen, instead 4 fit and the 5th goes to the next row. This makes little sense if 1vw is 1/100 of the viewport width, since 5 *(20/100) = 100/100 viewport width. Therefore there should be enough space for all 5 of them to fit.
You must remove the default margins from the page if your content spans the entire 100%:
body {
margin: 0;
}
.row_1_element {
text-align:center;
font-size:3vw;
width:20vw;
float:left;
}
<div id="row_1">
<div class="row_1_element">
Menu
</div>
<div class="row_1_element">
user
</div>
<div class="row_1_element">
profile
</div>
<div class="row_1_element">
?
</div>
<div class="row_1_element">
?
</div>
<div>
Related
This question already has answers here:
How can you set the height of an outer div to always be equal to a particular inner div?
(2 answers)
Closed 2 years ago.
I have the following structure in my project:
<div class="container">
<div class="super-child">
<div class="uneditable">
<div class="A"><div>
</div>
<div class="uneditable">
<div class="B"></div>
</div>
</div>
...
</div>
I have the following restrictions with this structure:
container class must be display flex and be on column mode
super-child class must be display flex and be on row mode
uneditable class does cannot receive any styling at all, only that they have height and width 100%
What i'm trying to do is style this structure so that class A has a dominating height of over B, that is, if A height grows, B will have more height to match A's, if A is smaller, B will have the same height as A's
I've tried to set grow and shrink values in the class A and B. I can also change the displays to grid, but in my case is not preferred to.
Is there a way to make this dependence of height without using javascript to style the elements?
[UPDATE]
Found the answer to my question here. The solution was to use the following style for all children of super-child, except the first.
height: 0;
min-height: 100%;
This works due the fact that this conjunction of height definition can be understood as "have no height, just expand enough not pushing the boundaries"
... I would use grid for this, not flex and pay attention to the closing tag too :) , flex will require a bit of js to update heights :
example in a column since in a row should not be an issue
.super-child {
display: grid;
grid-auto-rows: 1fr;
}
.super-child > .uneditable {
border: solid;
}
<div class="container">
<div class="super-child">
<div class="uneditable">
<div class="A">A <br> AA</div>
</div>
<div class="uneditable">
<div class="B"> B</div>
</div>
</div>
</div>
<hr>
<div class="container">
<div class="super-child">
<div class="uneditable">
<div class="A">A </div>
</div>
<div class="uneditable">
<div class="B"> B<br> BB</div>
</div>
</div>
</div>
... side by side :
.super-child {
display: flex;
}
.super-child > .uneditable {
border: solid;
flex:1;
/* demo purpose to resize heights */
overflow-y:scroll;
resize:vertical
}
<div class="container">
<div class="super-child">
<div class="uneditable">
<div class="A">A <br> AA</div>
</div>
<div class="uneditable">
<div class="B"> B</div>
</div>
</div>
</div>
<hr>
<div class="container">
<div class="super-child">
<div class="uneditable">
<div class="A">A </div>
</div>
<div class="uneditable">
<div class="B"> B<br> BB</div>
</div>
</div>
</div>
This question already has answers here:
Align child elements of different blocks
(3 answers)
Closed 2 years ago.
I have 4 pictures that I wish to align, the issue I have is that they are not in the same div and I cannot find a responsive solution.
Depending on the size of the screen, the text may take up to 3 lines and I would like for all of the logos to adapt simultaneously even if their own text does not have as many lines.
This is what I currently have :
The logos are what I would like to align.
This is the HTML :
<div class="container">
<div class="row">
<div class="col-sm-3">
<div class="buffer"></div>
<p class="text-center">Mon LinkedIn</p>
<a class="image-link" href="link1">
<img class="image-link img-size" src="assets/img/contact/LinkedIn-Logo.png">
</a>
</div>
<div class="col-sm-3">
<div class="buffer"></div>
<p class="text-center">Mon profil Malt</p>
<a class="image-link" href="link2">
<img class="image-link img-size" src="assets/img/contact/logoMalt.png">
</a>
</div>
<div class="col-sm-3">
<div class="buffer"></div>
<p class="text-center">Mes projets open source</p>
<a class="image-link" href="link3">
<img class="image-link img-size" src="assets/img/contact/so-logo.png">
</a>
</div>
<div class="col-sm-3">
<div class="buffer"></div>
<p class="text-center">Mes contributions open source</p>
<a class="image-link" href="link4">
<img class="image-link img-size" src="assets/img/contact/GitHub_Logo.png">
</a>
</div>
</div>
</div>
And this is the CSS :
.image-link {
display: block;
margin-left: auto;
margin-right: auto;
}
.img-size {
max-width: 100px;
max-height: 20px;
}
.buffer {
padding-top: 40px;
}
I did try to put the text and the logos in different rows but even though it yields a good result on big screens, it does not on small screens ( the text gets separated of the logo )
position your link at the bottom will do the trick for you
.image-link {
position:absolute;
bottom:0;
}
and you can set the max-height for your text container if you want
You can adjust the height of the text (paragraph tag) by auto. If don't help done it by changing auto to 20% - 40%, depending on the size of the screen. You have to check the maximum height but I think 30% would be sufficient according to the text.
.buffer p {
height = 30%
}
This question already has answers here:
How to position text over an image with CSS
(8 answers)
Closed 3 years ago.
I have 3 images on my home page,I need text in top of each images,so how to add text over image
<div class="container">
<h2 class="section-title">
My clasess
</h2>
<div class="owl-carousel visit-carousel">
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
</div>
</div>
have the text inside of a div, and use the div as your image using css. background-image option, and inside the div insert your text.
Html
<div class="image-box">
<h2>Text Inside</h2>
</div>
css
.image-box {
background-color: #ccc;
height: 200px;
width: 200px;
}
This question already has answers here:
Align div elements side by side using floats [duplicate]
(4 answers)
Closed 8 years ago.
I am trying to align two divs in a container div. But the right div (smaller in size) sticks to the top right of the container div. Instead I want both of them to align inline with each other .
Here is the code what I have been trying:
<div class = "row">
<div style = "float: left"> <h1> HUGE CONTENT </h1> </div>
<div style = "float: right"> <p> small text </p> </div>
<div style= "clear: both;"> </div>
</div>
The content of the div's is dynamically loaded. So can't use the width property! In that way this is different from the exisiting questions I have found.
Any help is appreciated. Thanks.
Since you have 3 div but a last one unseen, display:inline-block + text-align:justify is just fine for the result you look for. DEMO
CSS:
.row {
text-align:justify;
}
.row > div {
display:inline-block;
}
.fix {
width:100%;
}
With HTML updated with class :
<div class = "row">
<div class="left" > <h1> HUGE CONTENT </h1> </div>
<div class="right"> <p> small text </p> </div>
<div class="fix"> </div>
</div>
I think you should set width and keep both " float : left "
this will might help you
<div class = "row" >
<div style = "float: left; width : 60%"> <h1> HUGE CONTENT </h1> </div>
<div style = "float: left; width : 30%; padding : 5%"> <p> small text </p> </div>
</div>
with proper width and padding you can achieve the desired look.
Let me know for any help
<div class = "row">
<div class ="row_block1"> <h1> HUGE CONTENT </h1> </div>
<div class ="row_block2"> <p> small text </p> </div>
<div style= "clear: both;"> </div>
</div>
<style>
.row
{
width: 100%;
display: block;
}
.row_block1
{
background: #e6e6e6;
display: table-cell;
margin-right: 5px;
}
.row_block2
{
background: #B28080;
display: table-cell;
margin-right: 5px;
}
</style>
<div class = "row">
<div style='50%;border:none'> <h1> HUGE CONTENT </h1> </div>
<div style='50%;border:none'> <p> small text </p> </div>
</div>
This question already has answers here:
CSS: Vertical column layout without <table>
(3 answers)
Closed 9 years ago.
I have the below html code. What I need to do is split wuiInPageNav into two sections. LeftArea and wuiMainPageNav and they need to be side by side all the time. LeftAre div will hold my jstree nodes and wauiMainPageNave div will hold my charts and data etc. When I do the following, left goes left and wuiMainPageNav goes to the right. But when I resize the browser window, make it smaller, wuiMainPageNave goes down to the botttom. How do I make sure that LeftArea is always on the left and wuiMainPageName is always on the right, regardles of the browser window and size?missing here. Any ideas?
div id="wuiLeftArea">
<div id="wuiLefthandNavRoot">
<h2 class="wui-hidden">Section Navigation</h2>
<h3 class="wui-navigation-title">Applicaion</h3>
<div id=tree></div>
</div>
</div>
<div id=wuiMainArea>
<div id=wuiMainContent>
<div id=wuiInpageNav>
<div id="top_chart" class="center"> </div>
</div>
</div>
</div>
css:
#wuiInpageNav {left:300px; float:right; width:1200px !important; overflow:hidden; }
div#wuiLeftArea{
float: left;
width: 16.25em;
background-color: #f2f4f5;
padding-top: .5833em;
position: relative;
}
UPDATE
Make sure you don't do your CSS inline:
http://jsfiddle.net/FE79R/1/
HTML
<div id=wuiMainArea>
<div id=wuiMainContent>
<div id=wuiInpageNav>
<div id="left">
<div id="tree">tree</div>
</div>
<div id=main>
<div id="top_charts" class="center"> </div>
<div class="main1">
<div id="top_chart1" class="center">top chart 1</div>
<div id="top_chart2" class="center">top chart 2</div>
</div>
</div>
</div>
</div>
</div>
</div>
CSS
#wuiInpageNav { width:300px; overflow:hidden; }
#left { width:100px; float:left; position:relative; background-color:#f2f4f5;}
#main { width:200px; float:left; background-color:orange;}