I have the following layout...
The green elements repeats downward (they're tiles for a web-app).
The red column is a div with a fixed width, and the pink element also has a fixed size. The blue element is used elsewhere, and normally just takes the place of the green to sit in the red box - but under a special use case we need an options panel to come up on the side (the pink thing). So basically the blue element is a plain old div, no float, nothing like that.
Whenever I add the pink element, it appears below the blue. So I switched both blue and pink to inline-block, issue there is that the blue no longer grows to fill the extra space. So I'm at a loss.
How could I go about doing this, assuming that the red div cannot be changed? Thanks!
P.S. I don't need a complete code answer, just point me in the right direction and I'll fill in the dots.
try this
http://jsfiddle.net/mQN9Z/2/
CSS
.container {
width: 100%;
display: Table;
background-color: black;
height: 400px;
padding: 10px;
}
.left {
display: Table-cell;
background-color: #0054A6;
width: 70%;
}
.right {
display: Table-cell;
background-color: #EC008C;
width: 30%;
}
HTML
<div class="container">
<div class="left">left</div>
<div class="right">right</div>
</div>
Related
Suppose I have a container element that has a set width. I have a content element with a display inline-block that can contain some text. This text could be so big that it has to be filled over several lines. The problem with this is that default behaviour for multiline text is that it grows the element to the complete width of the parent element.
Imagine the following example:
HTML:
<div class="container">
<div class="content">
Firstreallongword11 Secondalsolongword22 Thirdwordthatisconsiderablylonger
</div>
</div>
CSS:
.container {
width: 260px;
border: solid blue 1px;
}
.content {
display: inline-block;
background: red;
}
Because these are long words, they will be positioned over multiple lines. What I would expect for the .content element, is that it would grow to the maximum width of the largest word on one single row.
But as you can see, because it consists of multiple lines, the element grows to the max width of .container .
FIDDLE
What I want to achieve is, .content gaining the width of the largest item on a single row, as it would with one single lin:
FIDDLE
Is there any way to achieve this with pure css/html?
The simple answer is: No, you can't do that with pure CSS.
But here is a solution anyway, which is a bit of a hack: It uses display: table-cell; for the .content element, and a rather small width value (which will adjust to the actual value of the longest word and acts like a min-width setting in this case):
.container {
width: 260px;
border: solid blue 1px;
}
.content {
display: table-cell;
width: 100px;
background: red;
}
<div class="container">
<div class="content">
Firstreallongword11 Secondalsolongword22 Thirdwordthatisconsiderablylonger
</div>
</div>
I have been trying to make a row of responsive boxes present a nicer look. After lots of effort and googling, I am here to get a word from experts. Please check the image below:
Outermost red is a bootstrap flexible row with display:flex;
Each box, the first of which is represented by green box, has flex: 1 ...;
Until this point, there is no issue and my CSS works perfect on all screen sizes showing all the boxes in same height and width. I just have two issues which I need help on.
Issue 1:
I need that lower part of box (represented by orange border) may always get positioned to the bottom of green box. This way all the buttons will appear in same line.
I tried to use a wrapper div in each box and then set position attribute for wrapper to relative and those of inner divs (yellow & orange) to absolute. Then I set the lower one to bottom: 0px;. But it does not work with flex and needs me to mention fixed height of wrapper which I cannot mention.
Issue 2:
In the box with the blue border I need the text of all lines to be justified except the last line which should be left aligned.
Issue 1
Assign display: flex to the div that is presented by the green box. After that, add align-self: flex-end; to the orange box. The orange box should now be displayed at the end of the green box.
Issue 2
Use the following fix to achieve what you want:
.blue-box {
text-align: justify;
-moz-text-align-last: right;
text-align-last: left;
}
The problem is that this wis not supported by Safari on Mac and iOS devices. You would have to add more markup to also cover Safari. An example would be to wrap each text line into a p tag if it's possible. Then you could do this:
.blue-box p {
text-align: justify;
}
.blue-box p:last-child {
text-align: left;
}
Please report back if the fixes do work for you or not.
The best way to solve this is to use flexbox.
.promo-boxes {
width: 100%;
display: flex;
justify-content: space-between;
background-color:black;
}
.promo-box {
width: 100px;
border: solid 1px #ccc;
background-color:red;
display: flex;
}
.btns-wrapper {
margin-top: auto;
align-self: flex-end;
}
<div class="promo-boxes">
<div class="promo-box">
<div>test 2</div>
<div class="btns-wrapper">
<button>
subscribe
</button>
</div>
</div>
<div class="promo-box">
<div>
test 3
</div>
<div class="btns-wrapper">
</div>
</div>
<div class="promo-box">
<div>
test 4 <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
loooong
</div>
<div class="btns-wrapper">
</div>
</div>
</div>
I have two divs with display:inline block next to each other, however the 2nd one's width can change to be so long that it will fall under the first div. That is fine, but the problem is that there is no vertical space between the 2 divs when this happens. I can solve this by adding margin-bottom to the first div, but then this causes the 2nd div to be a bit lower even when it is sitting to the right of the first div.
What browser are you using? As you can see below, two inline-block divs retain a margin when one slips below the other. (In fact, getting rid of the margin between inline-block elements is a bit tricky, but that's another question.)
#container {
width: 200px;
}
#top {
display: inline-block;
width: 100px;
height: 100px;
background: red;
}
#right {
display: inline-block;
width: 150px;
height: 100px;
background: blue;
}
<div id="container">
<div id="top"></div><div id="right"></div>
</div>
What you want is "vertical-align:top;".
I've created some tiles and want to position them within one . My problem starts already in the header line.
The red parts are "header-left.png" and "header-right.png" the violet part is a repeating tile "header-center.png".
What I already have:
.test {
width: 800px;
height: 200px;
border: dashed 1px #006597;
background-image: url('../images/standard/header-left.gif'),
url('../images/standard/header-center.gif');
background-repeat: no-repeat, repeat-x;
}
But how can I tell the second background, to start after 50px so it starts after the header-left.gif? And how can I position the third background so it is aligned to the right?
This is what I get now:
This is my goal:
red: header-left
violet: repeating header-center
black: header-right
green: repeating background
blue: footer-image
Try something like this:
HTML
<container>
<header>
<div class="red">
<div class="purple">
<div class="black">
</header>
<div class="green">
...
CSS
.header{
width: 800px;
}
.red{
display: inline-block;
width: 50px;
}
.purple{
display: inline-block;
width: 650px;
}
.black{
display: inline-block;
width: 100px;
}
And add your current background info
divide the header in three div and then load the background for the each header divs
Wrap your header within a container and have 3 separate elements that are floated next to each other:
#headerLeft{/*Custom Styles*/}
#headerCenter{/*Custom Styles*/}
#headerRight{/*Custom Styles*/}
Have a body container and a footer container.
Here's a Fiddle
You can swap out the background-color styles with your images and it should be what you're looking for.
I'm trying to understand the behavior of float and clear. For that reason I've created a tiny example (avaiable on jsfiddle) for experimenting:
HTML:
<div class="left">A</div>
<div class="custom">B</div>
<div class="left">C</div>
<div class="left">D</div>
CSS:
div {
background-color: blue;
color: red;
width: 100px;
height: 100px;
margin: 3px;
}
.left {
float: left;
}
.custom {
float: none;
}
First of all I do not understand why the background-color: blue; directive seems lost for B.
And secondly it's not clear to me, why removing margin: 3px; statement results in this:
Thank you in advance for your help or links.
The directive isn't being lost for B - it's just that the floated elements surrounding it are pushing the text outside of the div. Remove the background colour from the floated elements, and you can see things a bit clearer:
http://jsfiddle.net/faq9h/3/
When you remove the margin (as in your second image), what you're actually seeing is the background of C showing through underneath the B text.
A quick way of fixing this is to add display: inline-block to the non-floated element:
http://jsfiddle.net/faq9h/4/
Then your boxes will appear as A C D B.
As for understanding what's going on: this is an excellent article.