Trying to have all flex boxes inside my flex containers scale equally.
If you try and reduce the viewport, the center flexbox will start to resize, but the outer ones do not. So you end up with a situation where you have a tiny image in the center with massive images on the sides.
I've only just started learning CSS, so I'm not entirely sure what I am doing so I appreciate any help.
Here are a few extra images that help illustrate the issue:
Before reducing viewport:
After:
So ideally I want the images on the outside to scale down alongside the image in the center.
.flexbox-container {
display: flex;
justify-content: center;
background-color: #808080;
}
.flexbox-inner {
width: 1280px;
height: 720px;
margin: 0px 32px;
border: 3px solid #000000;
background-color: #808080;
}
.flexbox-outer {
width: 192px;
height: 1148px;
border: 3px solid #000000;
background-color: #808080;
}
.flexbox-outer-inner {
width: 160px;
height: 558px;
margin: auto;
border: 3px solid #ffffff;
}
.flexbox-outer-inner-bottom {
margin-top: 26px;
}
<div class="flexbox-container">
<div class="flexbox-outer">
<div class="flexbox-outer-inner"></div>
<div class="flexbox-outer-inner flexbox-outer-inner-bottom"></div>
</div>
<div class="flexbox-inner"></div>
<div class="flexbox-outer">
<div class="flexbox-outer-inner"></div>
<div class="flexbox-outer-inner flexbox-outer-inner-bottom"></div>
</div>
</div>
Here is an example of how you could use relative length units, in this case percentages:
* {
box-sizing: border-box;
}
.flexbox-container {
display: flex;
justify-content: center;
background-color: #808080;
}
.flexbox-inner {
width: 60%;
height: 720px;
margin: 0px 32px;
border: 3px solid #000000;
background-color: #808080;
}
.flexbox-outer {
width: 20%;
height: 1148px;
border: 3px solid #000000;
background-color: #808080;
}
.flexbox-outer-inner {
width: 90%;
height: 558px;
margin: auto;
border: 3px solid #ffffff;
}
.flexbox-outer-inner-bottom {
margin-top: 26px;
}
<div class="flexbox-container">
<div class="flexbox-outer">
<div class="flexbox-outer-inner"></div>
<div class="flexbox-outer-inner flexbox-outer-inner-bottom"></div>
</div>
<div class="flexbox-inner"></div>
<div class="flexbox-outer">
<div class="flexbox-outer-inner"></div>
<div class="flexbox-outer-inner flexbox-outer-inner-bottom"></div>
</div>
</div>
I'm trying to get some process flow arrow div's working. The idea is on the current process you would select someone to assign it to from a dropdown inside that current process and click a button to tell that person. That person will come in and on that process they'll see Accept or Reject buttons and then I'll open up the next process with a dropdown on who to assign again.
I'm having trouble just being able to get stuff to fit inside the process div. Things get all whacky. Ideally because they have "arrows" each process div would be a specific height that I set so it can handle the biggest height requirements inside (when buttons or dropdowns are inside).
I'm also not a huge fan of having to increase the left value by 30 pixels for each div arrow element. Any way to get this same look and feel without having to do that?
.arrow-container > div {
float: left;
}
.arrow-left-done {
display: inline-block;
width: 0;
height: 0;
border-top: 40px solid #d8ffcc;
border-bottom: 40px solid #d8ffcc;
border-left: 40px solid transparent;
}
.arrow-ctr-done {
display: inline-block;
width: 150px;
background: #d8ffcc;
min-height: 80px;
line-height: 80px;
position: relative;
text-align: center;
}
.arrow-right-done {
display: inline-block;
height: 0;
border-top: 40px solid transparent;
border-bottom: 40px solid transparent;
border-left: 40px solid #d8ffcc;
position: relative;
}
.arrow-left-current {
display: inline-block;
width: 0;
height: 0;
border-top: 40px solid #99afff;
border-bottom: 40px solid #99afff;
border-left: 40px solid transparent;
}
.arrow-ctr-current {
display: inline-block;
width: 150px;
background: #99afff;
min-height: 80px;
line-height: 80px;
position: relative;
text-align: center;
}
.arrow-right-current {
display: inline-block;
height: 0;
border-top: 40px solid transparent;
border-bottom: 40px solid transparent;
border-left: 40px solid #99afff;
position: relative;
}
.arrow-left {
display: inline-block;
width: 0;
height: 0;
border-top: 40px solid #EBEBEB;
border-bottom: 40px solid #EBEBEB;
border-left: 40px solid transparent;
}
.arrow-ctr {
display: inline-block;
width: 150px;
background: #EBEBEB;
min-height: 80px;
line-height: 80px;
position: relative;
text-align: center;
}
.arrow-right {
display: inline-block;
height: 0;
border-top: 40px solid transparent;
border-bottom: 40px solid transparent;
border-left: 40px solid #EBEBEB;
position: relative;
}
<div style="display:inline-block;" class="arrow-container">
<div id="zz" class="arrow-ctr-done">
Changed/Tested
Batman
</div>
<div id="zz" class="arrow-right-done"></div>
</div>
<div style="display:inline-block;position:relative;left:-30px" class="arrow-container">
<div id="zz" class="arrow-left-current"></div>
<div id="zz" class="arrow-ctr-current">
Coding Standards
<select>
<option>John Smith</option>
<option>Jane Doe</option>
<option>Howdy Doody</option>
<option>Batman</option>
</select>
<button>Assign</button>
</div>
<div id="zz" class="arrow-right-current"></div>
</div>
<div style="display:inline-block;position:relative;left:-60px" class="arrow-container">
<div id="zz" class="arrow-left"></div>
<div id="zz" class="arrow-ctr">
Manager Approval
</div>
<div id="zz" class="arrow-right"></div>
</div>
<div style="display:inline-block;position:relative;left:-90px" class="arrow-container">
<div id="zz" class="arrow-left"></div>
<div id="zz" class="arrow-ctr">
Implementor
</div>
<div id="zz" class="arrow-right"></div>
</div>
<div style="display:inline-block;position:relative;left:-120px" class="arrow-container">
<div id="zz" class="arrow-left"></div>
<div id="zz" class="arrow-ctr">
Validator
</div>
<div id="zz" class="arrow-right"></div>
</div>
It is a common <h3> but the text appear on the right side of box, not extreme right but almost, something like that
h3:
.....................................................................................................................................................................
text appear here
.....................................................................................................................................................................
html file:
<div class="fifth">
<p>F-Village</p>
<div class="f-t">
<div class="f-t-col" id="f-t-c-photos">
<h2>Photos</h2>
<div class="big-photo">
<img src="./images/photo.jpg">
</div>
<div class="small-photo">
<img src="./images/photo.jpg">
<img src="./images/photo.jpg">
<img src="./images/photo.jpg">
</div>
</div>
<div class="f-t-col" id="f-t-c-material">
<h2>Material</h2>
<span>
...some text...
</span>
<p>
<img src="./images/history.jpg">
...some text...
</p>
</div>
<div class="f-t-col">
<h2>Words</h2>
<p class="words"><em>"...some text..."</em>
</p>
</div>
</div>
<div class="f-m">
<div class="f-m-l">
<h3>Video</h3> <!--The problem appear here-->
</div>
</div>
</div>
css file:
.fifth{
/* margin-top: 40px; */
width: 100%;
height: 700px;
color: white;
background-image: url('../images/ww-bg.jpg');
margin: auto;
}
.fifth .f-t-col{
color: white;
height: 265px;
width: 27%;
display: inline-block;
margin-left: 57px;
float: left;
}
#f-t-c-photos div{
float: left;
}
#f-t-c-photos .big-photo{
width: 190px;
}
#f-t-c-photos div:last-child{
width: 80px;
}
.f-t{
width: 1102px;
margin-left: 125px;
height: 240px;
border-bottom: 2px solid rgba(100, 100, 100, 0.9);
}
.small-photo img{
margin-bottom: 2px;
height: 55px;
width: 60px;
}
.small-photo img:first-child{
margin-top: 15px;
}
.big-photo img{
width: 165px;
height: 171px;
margin-top: 15px;
border: 2px #00b3ff solid;
}
.f-t-middle img{
width: 165px;
height: 170px;
margin-top: 15px;
border: 2px #00b3ff solid;
}
.words{
margin-top: 65px;
font-size: 17px;
}
.fifth h2{
color: #2e2e2e;
font-size: 17px;
color: whitesmoke;
padding: 0 0 10px 7px;
background: url('../images/ww-title.png') top right no-repeat;
margin-top: 5px;
height: 8px;
border-left: 3px solid red;
}
#f-t-c-material img{
float: left;
width: 215px;
}
#f-t-c-material span{
font-weight: 800;
font-size: 16px;
color: #00b3ff;
}
.f-m:before{
clear: both;
}
.f-m h3{
color: white;
}
You can align your text like this,
h1 {
text-align: center;
}
h2 {
text-align: left;
}
h3 {
text-align: right;
}
If the text is in a div that is floating right or margin right, you could change it to
float: left;
<html>
<head>
<title>Pixafy</title>
<style>
html {
background: url(wp.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.wp.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='wp.jpg', sizingMethod='scale')";
padding-top: 50px;
}
#ldiv {
vertical-align: top;
height: 120px;
width: 40%;
color:#ccc;
float: left;
position: relative;
border: 1px solid yellow;
}
#rdiv {
vertical-align: top;
float: left;
width: 40%;
border: 1px solid blue;
height: 120px;
}
#ctr {
vertical-align: middle;
width: 80%;
height: 150px;
border: 1px solid white;
background:url(mid.png) no-repeat center center;
}
#container1 {
vertical align: top;
width: 80%;
height: 300px;
border: 1px solid green;
background-color: #E3E3E3;
}
#container2 {
vertical align: top;
width: 80%;
height: 250px;
border: 1px solid green;
background-color: #000000;
}
#text1 {
align: left;
width: 80%;
color: #000000;
font-family: Arial, Vedana, Tahoma;
font-size: 24px;
font-weight: bold;
}
#space {
height: 25px;
border: 1px solid purple;
width: 80%;
}
ul {
list-style-type: none;
height: 80px;
width: 500px;
margin: auto;
}
li {
float: left;
}
ul a {
background-color: #29281E;
background-repeat: no-repeat;
background-position: right;
padding-right: 20px;
padding-left: 20px;
padding-top: 6px;
padding-bottom: 6px;
display: block;
line-height: 22px;
text-decoration: none;
font-weight: bold;
font-family: Verdana, "Times New Roman", Times, serif;
font-size: 14px;
color: #D6D7D8;
}
.clear-both {
clear: both;
}
#text2 {
width: 70%;
border: 1px solid #00CCFF;
color: #000000;
font-size: 16px;
font-family: Arial, Verdana, Tahoma;
font-weight: bold;
}
#btn {
width 10%;
border: 1px solid #FFCC00;
vertical-align:bottom;
}
.btnlearn {
clear:both;
width:125px;
height:40px;
background:#E55D22;
text-align:center;
line-height:40px;
color:#FFFFFF;
font-size:12px;
font-weight:bold;
cursor: pointer;
}
.btnlearn:hover {
text-decoration: underline;
cursor: pointer;
}
#rcw {
width: 80%;
color: #BAB8B8;
font-size: 18px;
font-size: Arial, Verdana, Tahoma;
}
#left
{
width: 33%;
float: left;
border: 1px solid yellow;
display: inline-block;
height: 250px;
}
#right
{
width: 33%;
float: left;
border: 1px solid white;
display: inline-block;
height: 250px;
}
#mid
{
width:33%;
float: left;
border: 1px solid red;
display: inline-block;
height: 250px;
}
</style>
</head>
<body>
<div width=100% style="margin: 0 auto;">
<div id="ldiv"><img src="pixafy.png" style="position: absolute; left: 0px;" /></div>
<div id="rdiv">
<ul>
<li>Home</li>
<li>Services</li>
<li>Works</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</div>
<div class="clear-both"></div>
<div id="ctr"></div>
<div class="clear-both"></div>
<div id="space"></div>
<div class="clear-both"></div>
<div id="container1" style="position: relative;">
<div id="text1" style="position: absolute; left: 25px; top: 15px;">We are a company of experts developer based in New York City.<br>Partner with us to achieve your business goals through technology.</div>
<div class="clear-both"></div>
<div id="text2" style="position: absolute; left: 25px; top: 85px; overflow: auto">Our talented and experienced team has over 10 years of experience developing world-class websites and applications, and we leverage the latest technologies, content management solutions, open source platforms and web standards to solve any challenge.</div>
<div id="btn" style="position: absolute; right: 45px; top: 100px;"><input type=button class=btnlearn value="Learn More" /></div>
<div class="clear-both"></div>
<div id="rcw" style="position: absolute; left: 25px; top: 175px;">Recent Work</div>
<img src="1.png" style="position: absolute; left: 150px; bottom: 0px;" />
<img src="2.png" style="position: absolute; left: 400px; bottom: 0px;" />
<img src="3.png" style="position: absolute; left: 650px; bottom: 0px;" />
</div>
<div class="clear-both"></div>
<div id="container2" style="position: relative;">
<div id=left stlye="position: absolute;">
<span style="position: relative; top: 25px; left: 25px; color: #FFFFFF; font-size: 19px; font-weight: bold;">Website Development</span>
<div class="clear-both"></div>
<img src="wd.png" style="position: relative; left: 25px; top: 40px;" />
<span style="position: relative; width: 25%; top: 40px; left: 80px; color: #ffffff; border: 1px solid green;">Custom websites and easy-to-use content management solutions that are scalable, robust and cross browser compatible. Our team has knowledge and experience in all web technologies.</span>
</div>
<div id=right stlye="position: absolute;">
<span style="position: relative; top: 25px; left: 25px; color: #FFFFFF; font-size: 19px; font-weight: bold;">eCommerce Solutions</span>
</div>
<div id=mid stlye="position: absolute;">
<span style="position: relative; top: 25px; left: 25px; color: #FFFFFF; font-size: 17px; font-weight: bold;">Mobile Phone Applications</span>
</div>
</div>
</div>
</body>
</html>
Outpost
I want to wrap it so I can have the similar contents in the next two DIV as well.
Not sure why is there a tab on the first line and giving me this issue.
Can someone tell me why is it going over to the next DIV?
Please help me resolve this issue.
I would like to make it look like this:
I'm giving you an answer but request you to learn about Semantic HTML and CSS Positioning. That'd help you out a lot.
Now, as far as this example is concerned, you're over-using CSS Positioning. KISS principle states that the html should be very simple and easy to style. Yours is but is not semantic. I've made it semantic and have then added correct styles to mimic what you want.
New screenshot:
JS Fiddle Demo: http://jsfiddle.net/q9Rvq/3/
Added CSS:
#container2 > div h5{
text-align:center;
margin:5px 0px;
}
#container2 > div img{
float:left;
margin-left:20px;
}
#container2 > div p{
margin-left:55px;
margin-right:10px;
margin-top:0px;
width:auto;
}
Edited HTML:
<div id="container2" style="position: relative;">
<div id=left stlye="">
<h5 style="color: #FFFFFF; font-size: 19px; font-weight: bold;">Website Development</h5>
<div class="clear-both"></div>
<img src="wd.png" style="" />
<p style="color: #ffffff; border: 1px solid green;">Custom websites and easy-to-use content management solutions that are scalable, robust and cross browser compatible. Our team has knowledge and experience in all web technologies.</p>
<span style="position: relative; bottom: 0px; right: 15px;">Learn More</span>
</div>
<div id=right stlye="">
<h5 style="color: #FFFFFF; font-size: 19px; font-weight: bold;">eCommerce Solutions</h5>
<div class="clear-both"></div>
<img src="wd.png" style="" />
<p style="color: #ffffff; border: 1px solid green;">Our team will collaborate with you to understand your online objectives and goals, using that information to build a secure and reliable web-based storefront.</p>
<span style="position: relative; bottom: 0px; right: 15px;">Learn More</span>
</div>
<div id=mid stlye="">
<h5 style="color: #FFFFFF; font-size: 17px; font-weight: bold;">Mobile Phone Applications</h5>
<div class="clear-both"></div>
<img src="wd.png" style="" />
<p style="color: #ffffff; border: 1px solid green;">Our team specializes in developing mobile applications and websites that deliver on quantity, performance and speed.</p>
<span style="position: relative; bottom: 0px; right: 15px;">Learn More</span>
</div>
</div>
The content is overflowing because the element is relatively positioned. As some people have commented you should try not to use too much positioning as it will hinder you from creating layouts that reflow. You could also apply a width to the element to wrap the text.
The HTML for the picture you show should look like this:
<div>
<h3>eCommerce Solutions</h3>
<img alt="" src="">
<p>Our team will...</p>
Learn More
</div>
Css could look like this:
div {
width: 300px;
height: 200px;
background-color: #000;
color: #fff;
padding: 20px;
}
div img {
float: left;
margin: 0 10px 10px 0;
}
div a {
float: right;
}
Fiddle: http://jsfiddle.net/LM5MZ/3/
In this jsFiddle (don't mind the broken images...) I've only made a slight tweak to the style attribute of the <span/> tag holding the text which is overflowing. I replaced position: relative; width: 25%; top: 40px; with margin: 40px 5px 5px 80px;display: inline-block; The display: inline-block tells the browser to render the element with a box model which is required for the margin: 40px 5px 5px 80px attribute to be respected. This keeps the content within its containing parent <div/> tag.
However, it's still overflowing the bottom, probably because of the absolute positioning. If you wanted it to scroll, you could apply overflow: auto to that <div/> but I don't think that's the look you're going for.
This is the span tag you have which is holding the text that is bleeding over:
<span style="position:relative;width: 25%; top: 40px; left: 80px; color: #ffffff; border: 1px solid green;">
The div, called #left, has a style which sets
width:33%
so it is a fixed width. the "left:80px" in your span style is forcing the text outside of the fixed width left div. So, just move it to the right, try left: 0px instead.
The problem is the misuse of position. It's better in this case to use padding.
Here is some tidy html taking use of css, padding and a little floating:
HTML
<div id="BoxContainers">
<div class="boxes left">
<div class="innerBox">
<div class="title">Website Development</div>
<img src="wd.png" alt="" />
<div class="content">
<p>Custom websites and easy-to-use content management solutions that are scalable, robust and cross browser compatible. Our team has knowledge and experience in all web technologies.</p>
Learn More
</div>
</div>
</div>
<div class="boxes right">
<div class="innerBox">
<div class="title">eCommerce Solutions</div>
<img src="wd.png" alt="" />
<div class="content">
<p>Our team will collaborate with you to understand your online objectives and goals, using that information to build a secure and reliable web-based storefront.</p>
Learn More
</div>
</div>
</div>
<div class="boxes centre">
<div class="innerBox">
<div class="title">Mobile Phone Applications</div>
<img src="wd.png" alt="" />
<div class="content">
<p>Our team specializes in developing mobile applications and websites that deliver on quantity, performance and speed.</p>
Learn More
</div>
</div>
</div>
</div>
CSS
#BoxContainers {
height: 250px;
border: 1px solid green;
color: #ffffff;
background: #000000;
position: relative;
}
.boxes {
width: 33%;
float: left;
height: 250px;
}
.boxes.left {
border: 1px solid yellow;
}
.boxes.right {
border: 1px solid white;
}
.boxes.mid {
border: 1px solid red;
}
.boxes .innerBox {
padding: 25px;
}
.boxes .title {
font-size: 19px;
font-weight: bold;
margin-bottom: 10px;
}
.boxes img {
float: left;
}
.boxes .content {
padding-left: 55px;
}
.boxes .content p {
margin-top: 0;
}
Demo
Take note, there is no inline styling. Avoid using inline styling, even for mocking something up quickly. If you are using css properly, it will be quicker putting your css in a stylesheet and using classes to reuse your styles.
I am trying to make a 3 column layout with the 2 fixed width divs (floated left and right) and with a fluid center div that changes it's width according to display width. All of those are contained in a wrapper div.
The way that I went about doing this is by creating to divs with fixed width that are floated left and right a 3rd div that is positioned relative the wrapper div with margin right in order to leave place for the right div to show.
However the problem is that if the fluid div has content it overflows the right div, ignoring the margin-right style. Why does this happen?
It also seems that the 1111 get's preformatted for some odd reason.
The code:
<div style="width: 90%; border: 1px solid black; margin: 0 auto; overflow: hidden; position: relative;">
<div style="width: 150px; height: 150px; border: 1px solid red; display: inline-block; float: left; text-decoration: underline; min-width: ???">remove<br /> assets</div>
<div style="border: 1px solid #999; position: absolute; left: 160px; margin-right: 160px;"><p>111111111111111111111111111111111111111<br />1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111</p></div>
<div style="width: 150px; height: 150px; border: 1px solid red; float: right">111</div>
</div>
I recommend using two divs floated.
On the right one, place the middle and the right divs.
All that is done via floats:
HTML:
<div class="left">content for the left</div>
<div class="rightContainer">
<div class="right">right content</div>
<div class="middle">middle content</div>
</div>
CSS:
.left {
float: left;
width: 100px;
overflow: hidden;
min-height: 30px;
background: red;
}
.rightContainer {
float: none;
min-height: 30px;
overflow: hidden;
background: yellow;
}
.right {
float: right;
width: 100px;
overflow: hidden;
min-height: 30px;
background: blue;
}
.middle {
overflow: hidden;
min-height: 30px;
background: green;
}
example:
UPDATE: applied to your content: http://jsfiddle.net/2KXW5/1/
This can be solved by specifying the style word-wrap: break-word; for your center fluid div.
Browsers don't work well with word-wrapping. Anyways I hope this code brings some help:
<div style="width: 90%; border: 1px solid black; margin: 0 auto; overflow: hidden; position: relative;">
<div style="width: 150px; height: 150px; border: 1px solid red; display: inline-block; float: left; text-decoration: underline; min-width: ???">remove<br /> assets</div>
<div style="width: 150px; height: 150px; border: 1px solid red; float: right">111</div>
<div style="border: 1px solid #999; position: relative; left: 10px; margin-right: 160px; overflow:hidden; word-wrap: break-word; "><p>111111111111111111111111111111111111111<br />1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111</p></div>
</div>
First: paragraph elemements are block-level elements. Google it to learn more. So if you want it to not overlap with the other You must float it as well.
so include this in the header (or separate file - or inline if you want):
<style type="text/css">
p {
float:left;
}
</style>
Then rearrange your divs:
<div style="width: 90%; border: 1px solid black; margin: 0 auto; overflow: hidden;position: relative;">
<div style="width: 150px; height: 150px; border: 1px solid red; display: inline-block; float: left; text-decoration: underline; min-width: ???">remove<br /> assets</div>
<div style="width: 150px; height: 150px; border: 1px solid red; float: right">111</div>
<div style="border: 1px solid #999; display:block; margin-left:160px; margin-right: 160px;overflow:auto;"><p >111111111111111111111111111111111111111<br />1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111</p></div>