This question already has answers here:
How to get this 2 columns layout (were one fits to content)
(3 answers)
Closed 4 months ago.
The columns should:
be full height
have vertical scrollbars if needed but no horizontal
This is what I got so far (along with a footer and a header)
http://jsfiddle.net/HZMCX/11/
The problem withmy code is that the right panel text starts at mid screen and not next to the left panel.
[Ignore this, this is so stackoverflow allows me to post the link to jsFiddle ]
Any ideas on how to fix this?
Thanks!
Your code can be applied much more simply than you currently have it:
Consider simply floating the side column and the primary content and setting fluid widths on both.
http://jsfiddle.net/MygUu/
Wrap the overall layout in a .container class, and set overflow to hidden.
.container {
overflow: hidden;
}
Additionally, it is best practice not to style using ID selectors. Hope that helps.
Related
This question already has answers here:
Align child elements of different blocks
(3 answers)
Closed 2 years ago.
Since I'm not a native English speaker its difficult to explain the problem with words. Please refer to the image I will explain to my problem below.
Currently, I'm using bootstrap 4, But If this can be done by pure CSS HTML that's also fine.
The issue is the column card's title and paragraphs words count different to each column card. But these things must be archive developing the layout.
All titles should align to the top & should be in the same line.
All paragraphs should align to the top after the title but all paragraphs should be aligned in the same horizontal line.
All buttons (Green squares) align to the bottom of the card.
I have done this using min-height in CSS. But when it comes to short titles & short paragraphs. UI is not so great.
Please show me the direction how to do this.
Thanks in advance.
The way I see it, you'll have to combine bootstrap card and Flexbox to achieve this. Or you can just use flexbox and put the element into each flexbox and justify-content: flex-start; and align-content: space-between; for it.
User overflow properties when length is more than a height on your paragraph, or try #media queries when the window's width is more than 992px
Links:
https://www.w3schools.com/css/css3_mediaqueries_ex.asp
https://www.w3schools.com/css/tryit.asp?filename=trycss_overflow_intro
This question already has answers here:
Fill the remaining height or width in a flex container
(2 answers)
Closed 4 years ago.
Hey Guys I'm making a job application form for a website. I'm using flexbox for the layout but on <div class="row row-9"> I have one label element that sits on the left side and one input element on the right side. I'm using justify-content: space-between; to separate them apart. However I want the input field to expand to fill all of that empty space. Would i do this with the width property? Also Am I even making this form right I have s many css rules with one property and the html doesn't look good either. I've only made one other form before. Thanks for your help:)
https://jsfiddle.net/wpm1crtz/1/
input{
flex:2
}
Or however width You want to make the the input.
for example if you put flex:2 , it will essentially take up 66% of the row,
flex:1 would take up 50% etc.
This question already has answers here:
Make container shrink-to-fit child elements as they wrap
(4 answers)
Closed 6 years ago.
Firstly, apologies for the hard to understand question title.
In HTML/CSS, I want my multiple line text element to inherit it's width from the text inside. It does this if the contained text only spans one line, but when the text spans multiple lines, it forces itself to width:100%;.
Here's a fiddle of the problem: https://jsfiddle.net/guzvpe2q/
This is what happens:
This is what should happen:
Thanks in advance.
The div really is being pushed that wide by the text, but the text cannot fit so it needs to be pushed down a line.
You also need display:inline-block.
One way around it would be to add manual line-breaks after the first word (not exactly ideal i know)
See (https://www.w3.org/TR/CSS21/visudet.html#inlineblock-width)
This question already has answers here:
Make a div fill the height of the remaining screen space
(41 answers)
Closed 7 years ago.
I have made a columnar layout that works fairly well for my needs, but I am experiencing an issue with the height of one column. I have prepared a jsBin that demonstrates the problem;
http://jsbin.com/mawuliyulo/1/edit?html,output
Basically, when you scroll down - eventually you start seeing white on the left side. Is there any way to force this to stretch all the way down indefinitely?
This is not using a flex-box layout. It is simply achieved using :before, and :after pseudo-selectors.
Add position:relative to your main-container class
This question already has answers here:
Why does the CSS min-width attribute not force a div to have the specified minimum width?
(6 answers)
Closed 8 years ago.
The template to rebuild my website works great except for the 2 divs in the center which are floated left & right. They seem to need at least a full line of text in each one to stay open.
If not the navigation on the left seems to go off screen to the left. The left & right divs are fixed widths.
The 2 center ones are floated I believe properly & cleared. Each 48% width.
Is there a way to keep them fully expanded for pages that do not have a line that covers the full width. I know my screen is 1920px's wide & they are getting wider.
I have been researching this for days & always seem to end up at this site.
The only thing I can think of is to put say 16 - 100px wide spacer gif's side by side in each center 48% div. That just isn't right.
Is there a way to keep the div's full width?
Full page sample. If either of the 2 full lines in the 2 center div's are shortened the left nav goes further left.
http://www.trurons.com/travel/
I looked at the source of the page you linked and can't figure out what you are talking about and I can't visually grasp it from your question.
If the other posters answer does not help I would reccommend looking at this site here for a refresher of how HTML elements interact with eachother. You probably already know it but the refresher might help you figure out why your elements shrink and expand based on what is around and in them.
http://www.barelyfitz.com/screencast/html-training/css/positioning/