How can I display a div of fixed width 800px and on the both sides (left and right) there should be auto adjusting divs. Till now I have tried using float:left on the left auto adjusting div , widht:800px on the center div and float:right on the auto adjusting right div , but it is not working.
This is what i am getting till now.
Note: the background of center div is black, all three divs are enclosed in container div which has background color of red.
HTML Code
<body>
<div id="outerSideContainerLeft" style:"float:left">
left
</div>
<div id="feedContainer">
center
</div>
<div id="outerSideContainerRight" style:"float:right">
right
</div>
</body>
CSS Code
div{
display:inline-block;
}
#feedContainer{
margin:0px;
width:800px;
background-color: black;
}
#outerSideContainerLeft
{
background-color: blue;
width: calc(49%-400px);
}
#outerSideContainerRight
{
background-color: green;
width: calc(49%-400px);
}
Try this
this is just using inline-block for the display and using the calc property for the width of the left/right boxes.
Keep in mind the left/right boxes will go under each other once the screen is too narrow. you can use media queries to change the layout so its responsive like this
The calc property basically calculates a value for you. The example I gave, you had a middle div with width 200px. So the right/left boxes need to be 50% of the entire width of window MINUS half the size of the middle box.
so 50% of the window minus 100px, this will give them relatively the right amount of width so they fill in the line around the fixed width middle div.
Except, theres a weird margin when using inline-block, so I use 49% instead, to account for the margin.
You could try the new CSS3 flexbox.
Check out this fiddle, and if it is what you're looking for, then I can elaborate.
Basically, your container needs this style:
display: flex;
Your left and right elements need these styles:
flex-grow: 1;
flex-shrink: 1;
And your middle element needs these styles:
flex-grow: 0;
flex-shrink: 0;
So, for HTML that looks like this:
<div class="container">
<div class="left">We keep content here. Blah blah blah blah blah. Also, blah blah blah.</div>
<div class="mid">This is a fixed size.</div>
<div class="right">Some other content goes here.</div>
You would use CSS like this (see fiddle):
.container {
color: white;
background-color: red;
padding: 1em 0;
display: flex;
}
.left {
background-color: blue;
flex-shrink: 1;
flex-grow: 1;
}
.mid {
width: 600px;
background-color: black;
flex-shrink: 0;
flex-grow: 0;
}
.right {
background-color: green;
flex-shrink: 1;
flex-grow: 1;
}
Also see this guide for more information about flexbox. As a warning, it is not supported at all by older browsers.
Related
I am trying to have two elements horizontally aligned where the one on the left has text that may wrap then sizing the screen, and the one on the right allows for no wrapping. When the content wraps, the first element maintains the width of content + (wrapped word - pixels causing wrapping), instead of shrinking to fit the content.
I created an example on Fiddle where you can see the grey background of the first element having no content for a couple of pixels, instead of resizing to only include the text.
.container {
display: flex;
width: 760px;
}
.item {
background-color: grey;
width: fit-content;
block-size: fit-content;
}
.item2 {
background-color: green;
white-space: nowrap;
align-self: flex-start;
}
<div class="container">
<div class="item"><span> This Text to auto-adjust to only fit the content when wrapping</span></div>
<div class="item2">This should be right next to last word on first line on the left</div>
</div>
JSFiddle Demo
Is there a way of achieving an auto-size to only fit-content on resizing of the screen so the 2 element stays as close to the text of the first one as possible?
Elements inside a flexbox has flex-grow and flex-shrink set by default, which allows them to bypass the basic width and height properties.
To solve this problem, just disable flex-grow and flex-shrink:
.item {
background-color: grey;
width: fit-content;
block-size: fit-content;
flex-grow: 0;
flex-shrink: 0;
}
NOTE: You can skip the full explanation and scroll down to TLTR section.
I want to implement a slider like in this page positioned inside a vertical flexbox. I have the following code and it represents the inner flexbox div which is positioned horizontally i.e. the slider's layout.
.img {
max-height: 100%;
}
.items {
display: flex;
flex-direction: row;
height: 100%;
}
.item {
height: 100%;
border: 1px solid black;
}
.container {
overflow: hidden;
flex: 1 1 auto;
height: 80%;
width: 100%;
}
<div class='container'>
<div class='items' style='height: 100%'>
<div class='item'>
<img class='img' src="/img1.jpg" alt="this expected to be image 1"/></div>
<div class='item'><img class='img' src="/img2.jpg" alt="this expected to be image 2"/></div>
<div class='item'><img class='img' src="/img3.jpg" alt="this expected to be image 3"/></div>
</div>
</div>
The outer flexbox div looks like this:
.main {
display: flex;
flex-direction: column;
height: 100%;
}
.title {
flex: 0 0 60px;
border: 1px solid black;
}
.slider {
flex: 1 0 auto;
border: 1px solid black;
}
<div class="main">
<div class="title">Title</div>
<div class="slider">Slider</div>
</div>
The code for the inner flexbox div is rendering well on any browser. The same is the case with the code for the outer flexbox div. The problem comes when I put the inner flexbox div inside div.slider. The browser cannot render the HTML as expected. If I set height and min-height of div.title and height of div.slider then everything works on Firefox and Chrome. Cannot test it on Safari but I have the feeling that it won't work and I'm missing something. I tested on Epiphany browser which is developed on WebKit (same as Safari) and it fails to render. I've come across similar issues in the past, working with flexbox and overflowing divs and I know that there might be a browser's issue. If I remove height and min-height of div.title and div.slider and change some CSS params I could make the page render on Chrome but still fails to render on Firefox. Am I missing something or doing something wrong? I need a cross-browser solution.
================== TLTR ==================
Here it is a full example - https://jsfiddle.net/SitkaCharley/xht9vaef/10/
I expect the images in div.slide to resize and fit inside it even though they are different sizes. Instead I see images with different sizes and a verticall scroll bar when images are too big. My understanding is that since the .main div is instructed to take 100% of windows height the .title will take 60px and .slider will take the rest of parent's height (see .slider's flex item css instructions). Then the .container is expected to take 80% out of parent's height and .img's max-height: 100% will force to resize images to the height of their parents which is the height of .container.
I have two divs inside a third div. Div A is on the left, occupying 30% of the space. Div B is on the right, occupying 70% of the space.
When the width of the screen becomes too small to fit them side by side, I would like to position div B on top and div A on the bottom.
I have considered replicating div A before and after B. For normal width I would show A1 and hide A2. For smaller width I would show A2 and hide A1.
However this seems like a dirty trick. Is there any other way to achieve this?
I think you need order property of flexbox module, you can check this codepen example, you only need to add some breakpoints when you need to change the order, the order is applied to each child element of flexbox container
Flexbox is a good choice for this case.
By defining a media query for widths less than 575px and using flex-direction:column and set order for both divs you can arrange them as desired.
Below is an example I hope will help you:
.Main{
display: flex;
height: 150px;
color: white;
font-size: 2rem;
text-align: center;
line-height: 150px;
}
.A{
flex-basis: 30%;
background-color: red;
}
.B{
flex-basis: 70%;
background-color: blue;
}
#media screen and (max-width: 575px) {
.Main{
flex-direction: column;
}
.B{
order: 0;
}
.A{
order: 1;
}
}
<div class="Main">
<div class="A">A</div>
<div class="B">B</div>
</div>
I actually don't know how to name my question. But I will explain what I need to do.
HTML is simple as this:
<div id="left_div"></div>
<div id="right_div"></div>
I need left_div to be on the left, to have 100% width, but with fixed right margin 320px. right_div has fixed width 300px and must be alongside left_div.
I know I can do this very easily, when I would do this:
<div id="right_div" style="float:right;width:300px"></div>
<div id="left_div" style="margin-right:320px;"></div>
But the problem is that I need HTML to be as I mentioned before. The order of DIVs matter. If someone wonders why, it's because I am working on responsive website, where I need, when the viewport is too narrow, the right_div to be below left_div. And that I can't do with simple solution I have put above.
I hope my question makes sense and I am thankful for any answers or helpful hints.
Oh, and I forgot to mention I need this to be pure HTML+CSS, no JS. And I don't need to support IE7 and below.
UPDATE:
left_div must be width:auto and right margin must be fixed (e.g. 300px).
If you want your layout to be responsive you should use a CSS framework like Columnal, 1140, or more in this list.
Most of these frameworks supports the grid system, which is the best way to structure your layout and you don't have to worry about floats and pixels anymore.
I think that what do you want is almost impossible with just pure HTML + CSS.
What may work for you is something like this one I did: http://jsfiddle.net/fmZAm/
HTML:
<div class="main">
<div class="left"></div>
<div class="right">
<div class="fixed_content"></div>
</div>
</div>
CSS:
div.main
{
min-height: 500px; /* force some height */
min-width: 300px; /* min width to show content */
text-align: center; /* center content when in vertical responsive mode */
font-size: 0px; /* remove blank space from 'inline-block' display */
}
div.main > div /* left and right divs */
{
width: 100%; /* force both to have as max width as possible */
min-height: inherit; /* same min height as parent */
min-width: inherit; /* same min width as parent to show content */
display: inline-block;
}
div.left
{
max-width: 58%; /* 100% width from max of 58% parent width */
background-color: lightgreen;
}
div.right
{
max-width: 42%; /* 100% width from max of 42% parent width */
text-align: right; /* put child 'inline-block' divs to the right */
background-color: dodgerblue;
}
div.right > div.fixed_content
{
width: 300px; /* set the 300px right div you want */
min-height: inherit; /* same min height as parent */
background: orange;
display: inline-block;
}
As both divs (left and right) will have % widths, both will resize based on the current max width, but you'll have your fixed width div inside of the right div. So, when your right div resize to 300px width (the fixed with of its child div) it will go below the left div.
Hope it helps!
I had the same issue, I solved it using position:absolute.
HTML
<div class="container">
<div id="left_div"></div>
<div id="right_div"></div>
</div>
CSS
.container {
position:relative;
}
#left_div {
float: left;
width: auto;
margin-right: 320px;
}
#right_div {
position:absolute;
top:0;
right:0;
width: 300px;
}
I have next html:
<div class="left">
<div style="margin: 32px 0;">
<div class="border"></div>
</div>
</div>
and css:
.left {
position:absolute;
background: red;
height: 50%;
width: 32px;
}
.border {
background: green;
height: 100%;
}
but I don't see green box :(
UPD: I want to see red squares over and under green box.
UPD2: height of green box should be red.height - 32px*2
Your problem is that you have 3 empty div's here and not one of them has a set height. So even if you do min-height: 100% its not going to work unless some outer container has a height that your not showing. You will need to put some content in there or give one of the 3 div's (assuming they are the only containers on the page) an actual height. Like .left{ height: #px; } (# = the height you want it to have). Otherwise the browser does not know how to render percentages because it has nothing to relate them too.
Div's are block level elements which means they will assume the size of content put in them but if there is no content in them they will assume a height of 0px by 0px.
http://jsfiddle.net/X6qkL/5/ updated
The second div is not assigned a height, so the innermost div cannot be assigned a relative height. Try adding the following CSS rule:
.left div {
height: 100%;
}
Or, assign explicit heights to the inner divs.
http://jsfiddle.net/B9z92/1/
Use min-height: 100%; in .border{...}. and add a class
.middle {
height: 100%;
} and assign it to the parent div of .border{...} div.