I am struggling to implement the following page layout. My entire page gets horizontal scrollbar due to the wide <div> element containing "Content". I would, instead, like to have a horizontal scrollbar only on the red <div> element that is wrapping it. I can't seem to make flexbox expand elements to the width of the page, but then to stop at the end and let the scrollbar take over the wide element overflow.
I cannot afford to set fixed widths on any of the elements.
<!-- Must maintain display: flex; -->
<div style="display: flex; flex-direction: row; height: 100%;">
<div style="background-color: pink;">
<div style="padding: 20px; background-color: blue;">Menu Item A</div>
<div style="padding: 20px; background-color: purple;">Menu Item B</div>
<div style="padding: 20px; background-color: violet;">Menu Item C</div>
</div>
<div style="background-color: yellow; flex-grow: 1;">
<div style="margin: 20px;">
<!-- The following red div should have horizontal scrollbar -->
<div style="background-color: red; padding: 20px; overflow-x: auto;">
<div style="width: 5000px; background-color: beige;">
Content
</div>
</div>
</div>
</div>
</div>
Is it possible to achieve this without setting fixed widths? I would much prefer to use flexbox over tabled page layout.
Set the div which you don't want to have an overflow for to
overflow-x:hidden;
That should help.
Related
I have a problem I don't manage to solve by myslef, even though it looks simple.
On a web page, I have a flex container div, which contains 2 other div.
The first div is nothing else than a space reserved to trigger some action when the mouse is over(typically, open a menu).
The second div is dynamically populated with elements according to some parameters and user actions. (For example, the user clicks on a button which trigger the creation of a new textarea field).
So, the second div may become higher and higher.
Is there a way to have the first div automatically following the height of the second div, even if the second div overflows ?
Here is a basic example of what I did :
HTML
<div id='wrapper'>
<div id="div1">
-
</div>
<div id="div2">
<div class="yellowDiv">
One element
</div>
<div class="yellowDiv">
One element
</div>
<div class="yellowDiv">
One element
</div>
<div class="yellowDiv">
One element
</div>
<div class="yellowDiv">
One element
</div>
<div class="yellowDiv">
One element
</div>
<div class="yellowDiv">
One element
</div>
</div>
<div>
</div>
</div>
CSS
#wrapper {
display: flex;
align-items: flex-start;
flex-flow: row;
justify-content: flex-start;
}
#div1 {
background-color: mediumblue;
width: 20px;
color: mediumblue;
}
.yellowDiv {
background-color: yellow;
border: solid 2px;
height: 100px;
}
In this example, the yellow div simulates the one which is dynamically populated, and the blue div simulates the one I want to use to trigger the opening of my menu.
Is there a way to achieve this with flexbox ?
Thank you in advance for your help.
Regards,
Not with flex, but you should try doing it with grid.
#wrapper {
display: grid;
grid-template-columns: 20px 100px;
height: min-content;
}
#div1 {
background-color: mediumblue;
width: 20px;
color: mediumblue;
}
.yellowDiv {
background-color: yellow;
border: solid 2px;
height: 100px;
}
<div id='wrapper'>
<div id="div1">
-
</div>
<div id="div2">
<div class="yellowDiv">
One element
</div>
<div class="yellowDiv">
One element
</div>
<div class="yellowDiv">
One element
</div>
<div class="yellowDiv">
One element
</div>
<div class="yellowDiv">
One element
</div>
<div class="yellowDiv">
One element
</div>
<div class="yellowDiv">
One element
</div>
</div>
<div>
</div>
</div>
You can check the above code snippet.
The theory around the concept: If you don't specify a specific value of grid-template-rows, then it will make all the columns of maximum size.
Do let me know if you got a problem with it :)
I am trying to have an image sitting next to some text. The text needs to sit halfway vertically on the image
[IMG]
[IMG] Here is the text
[IMG]
I am getting the following, because the two cell divs are equal width, instead of matching content width:
[IMG]
[IMG] Here is the text
[IMG]
The code is preexisting. There is a table container div:
.vertical-align-container {
display: table;
table-layout: auto;
width: 100%;
}
And two table cell divs:
.vertical-align-child {
display: table-cell;
vertical-align: middle;
padding-left: 15px;
}
So no matter what I do, the table cells are equal width. How can I get the first to match content width, and the second to fill the remainder of the container?
HTML:
<div class="vertical-align-container">
<div class="vertical-align-child" style="padding-left: 0;">
<img src="path/img.png">
</div>
<div class="vertical-align-child">
<p>Here is the text</p>
</div>
</div>
As you can see, I've tried a couple things, but what I've included here is table-layout, which I though was supposed to do exactly this?
I think you could approach this with flexbox.
You can use the align-items property for vertical centering.
.container,
.text {
display: flex;
}
.text {
align-items: center;
padding-left: 1rem;
}
.image img {
display: block;
width: 100%;
height: auto;
}
<div class="container">
<div class="image">
<img src="https://unsplash.it/200">
</div>
</div>
<div class="container">
<div class="image">
<img src="https://unsplash.it/200">
</div>
<div div class="text">
<p>
Here is the text
</p>
</div>
</div>
<div class="container">
<div class="image">
<img src="https://unsplash.it/200">
</div>
</div>
Found an ugly workaround for this here:
CSS table column autowidth
The issue I was having was that my image is set to 100% width, while using a max-width of the size I wanted it to stop at. Apparently the table isn't willing to read in the max-width as the content size, so it chose 50%.
I hacked in a width for the image and set the table cell to have nowrap, as in the linked question. It's not by any means a good answer, but it'll do for a quick fix.
Here's a image of what i'm trying to do vs what i'm getting
Basically i'm floating all the div left but because the first div's height is taller than the rest, its leaving a gaping hole.
The generated divs are products in a shop collection.
while the tall first div is a filter menu that's always present.
How do i get all the div to fluidly float left and fill in the empty space.
Should i be looking at flex box? And its NOT a masonry / isotope kind of layout. only the first div has a taller height
here the page im working on:
http://goo.gl/4LfgAx
Hope this helps:
div.container{
width: 250px !important;
border: none;
}
div.container div.row{
width: 100%;
border: none;
}
div.container div.row div{
border: 1px solid black;
height: 50px;
float: left;
margin: 1px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-xs-3" style="height: 100px;"></div>
<div class="col-xs-3"></div>
<div class="col-xs-3"></div>
<div class="col-xs-3"></div>
<div class="col-xs-3"></div>
<div class="col-xs-3"></div>
<div class="col-xs-3"></div>
<div class="col-xs-3"></div>
</div>
</div>
i used many ways to make a flexible height to the divs and the whole page but no way .
what i want to do is :
i have 2 columns in the page after the header (right_side , left_side)
the both left and right sides will contain flexible content .
so i need the height of the both columns be flexible.
also want the right side height depends on the left side because maybe the article will be taller than the right content ..
i tried "height" and "min-height" but no way
this is my code
<html style="min-height: 100%;">
<body style="min-height: 100%; width: 980px; border-right: 2px solid black;
border-left: 1px solid black; margin: 0 auto;">
<div><img src="header.jpg"/></div>
<div id="content" style="min-height: 100%">
<div id="right" style="background: red; float:right; width: 280px; min-height: 100%;">my flexible right content</div>
<div id="left" style="background: blue; float:left; width: 700px; min-height: 100%;">
<p>my flexible article </p>
<p>my flexible article </p>
</div>
</div>
</body>
</html>
Try this: http://jsfiddle.net/mcfarljw/erdH7/
You're going to need to use some divs in divs to get the effect of having one column flexible with another if you want it pure CSS and HTML. You can do something like this for the html format.
<div id="container2">
<div id="container1">
<div id="col1">
</div>
<div id="col2">
</div>
</div>
</div>
I'd highly recommend you move your CSS styling into the head using references to the divs or put them in a seperated linked CSS file altogether.
Based on: http://matthewjamestaylor.com/blog/equal-height-columns-2-column.htm
I am having an issue with my webpage.
My div tags on the right side are overlapping onto my center column... I have set a min-width to my parent div tag but it did nothing to help elevate the problem.
Plus my navigation bar is giving me a little issue.. ENGAGEMENT will fall under the ABOUT tab when I re-size my web page. I have display: block; and display: inline; set in my CSS. It works fine just the re-sizing is hurting my web-page..
My layout is basic..
<body>
<div style="width:100%; margin-top: -18px; clear: both;">
<div style="width: 100%; height: 100px; background-color: white;">
<p style="padding-top: 3%;font-size:30px; font"><i>Welcome</i></p>
</div>
<div style="width: 100%; display: block; overflow: hidden; ">
<div><li>About</li></div>
<div><li>Books</li></div>
<div><li>Electronics</li></div>
<div><li>Apparel</li></div>
<div><li>Activities</li></div>
<div><li>Engagement</li></div>
</div>
<div style="float: left; background-color: white; margin-left: 80px;">
</div>
<div id="left-col" style="clear: left;">
</div>
<div id="central-col">
</div>
<div id="right-col" style="text-align: center; clear: right; ">
</div>
<div id="footer"><p style="text-align: center;">KNOWLEDGE IS POWER</p> </div>
</div>
</body>
It would be better if you have given full code (may be on jsfiddle) because it is hard to understand what these divs are doing by looking at your code. (You have made so many of them.)
For your solution, I think you have to remove
width: 100%
from second and third div.
You have set margin-left to 80px, so whenever you resize the window, it will always have a margin of 80px from left.
Also I want to know the use of
overflow: hidden;
in your code.