Being more of a backend developer, I'm finding myself having some trouble with the header I'm working on (HTML/CSS only). Fiddle: http://jsfiddle.net/yoom1jvw/
.container{
margin:0 auto;
text-align:left;
height:auto;
width:95%;
min-width:1000px;
max-width:2000px;
background-color:white;
}
As you can see the min-width of the container in 1000px before it stops responding to the change
My issue: The yellow box keeps collapsing under the grey box, and the grey box collapses under the green when responding to the width of the browser.
My Goal: Instead of the boxes collapsing under one another, I want the header to start removing the spaces in-between the boxes and also the search bar to slowly get smaller.
The search bar does respond a little, but I can't seem to figure out how to get the margins between the boxes to do the same. If anyone could point me in the right direction I'd really appreciate it!
NOTE: You will have to expand the fiddle quite a bit since we are dealing with wide resolutions.
Thanks!
short calculation with min-widths:
container= 1000px;
_________________________________
logo: 200px
search: 20% of container = 200px
btn-main: 200px
main-nav: 400px
login-box: 100px
---------------------------------
1100px + space between boxes
Your main problem is that you can't arrange about 1150px in a 1000px container ;)
Solution
If you can change some of the boxes widths to fit into the container. You could make the container "position: relative" so you're able to place your boxes in absolute positioning (in percentage) without the margin-left. For example if the width of main-nav would be 250px - http://jsfiddle.net/yoom1jvw/2/
I'm not too sure what you wanted.
However, I am sure you can change this to suit your needs
<!DOCTYPE html>
<html>
<head>
<style>
#header{
margin:0px auto;
width:95%;
height:80px;
background-color:blue}
.container{
display:block;
float:left}
.block{
display:block;
margin:0px auto;/*all blocks are centered in their container*/
max-width:100%}/*so a block can be greater than its container*/
#container1{width:20%}/*all the percentage must add up to 100%*/
#container2{width:20%}/*these are the widths of all the containers in %*/
#container3{width:10%}/*container3 is smaller than container4 by 20%*/
#container4{width:30%}
#container5{width:20%}
#block1{
background-color:black;
width:200px;
height:60px;}
#block2{
background-color:white;
width:300px;
height:50px}
#block3{
background-color:green;
width:100px;
height:70px}
#block4{
background-color:grey;
width:400px;
height:60px}
#block5{
background-color:yellow;
width:200px;
height:50px}
</style>
</head>
<body>
<div id="header">
<div id="container1" class="container"><!--container for block-->
<div id="block1" class="block"></div><!--Actual Block-->
</div>
<div id="container2" class="container">
<div id="block2" class="block"></div>
</div>
<div id="container3" class="container">
<div id="block3" class="block"></div>
</div>
<div id="container4" class="container">
<div id="block4" class="block"></div>
</div>
<div id="container5" class="container">
<div id="block5" class="block"></div>
</div>
</div>
</body>
</html>
Note: all containers could be the same % width, therefore you would not need all the extra ids
just make sure they add up to 100%
here is it live http://jsfiddle.net/6wpoecg3/
Related
Here is a code snippet showing the problem:
<!Doctype html>
<html>
<head>
<style>
.writingMode {
writing-mode:tb-rl;
-webkit-writing-mode:vertical-rl;
writing-mode:vertical-rl;
border: 5px green solid;
word-break:break-word;
overflow:hidden;
min-height:200px;
width:100px;
}
</style>
</head>
<body>
<div style="background-color:yellow; height:500px; width:200px; float:left;">
<div class="writingMode">
All of these should be the same height pneumonoultramicroscopicsilicavolcaniconiosis
</div>
</div>
<div style="background-color:orange; height:600px; width:200px; float:left;">
<div class="writingMode">
pneumonoultramicroscopicsilicavolcaniconiosis
</div>
</div>
<div style="background-color:yellow; height:700px; width:200px; float:left;">
<div class="writingMode">
All of these should be the same height pneumonoultramicroscopicsilicavolcaniconiosis pneumonoultramicroscopicsilicavolcaniconiosis pneumonoultramicroscopicsilicavolcaniconiosis
</div>
</div>
</body>
</html>
I would like all of the inner divs to be the same height, as dictated by the longest word in them. Instead, they are growing to the height of their parents, with the exception of the middle one in Chrome. Is there a CSS tag I could use to make them grow to the minimum height (above the given min-height) that fits all of the text based on a break-word word wrapping? It seems logical to me that what I have would do that but it isn't.
Edit:
The outer Divs (the big yellow and orange ones) should stay different heights, but the inner Divs should all be the same height because their longest words are all the same.
Thanks!
Remove the height form your parent element and the min-height from the children.
I made a fiddle. I hope this is what you mean?
.writingMode {
writing-mode:tb-rl;
-webkit-writing-mode:vertical-rl;
writing-mode:vertical-rl;
border: 5px green solid;
word-break:break-word;
overflow:hidden;
width:100px;
}
I have a max-width wrapper, within it are four boxes of a fixed width and height. When the browser window is reduced, the boxes fall inline and centered within the container, but the alignment is slightly out, as if there's a small left margin.
Here is a jsfiddle: http://jsfiddle.net/ve2fyrh7/
If I remove "text-align:center;" from #boxcontainer it clears up the alignment issue, but then the boxes won't be center-aligned inside the container which I require when the browser window is reduced.
If I remove ".box:last-child" then that also solves the alignment issue, but then all four boxes won't be inline when the browser window is >960px.
I appreciate any help/suggestions on where I'm going wrong.
CSS
#wrapper {
max-width:960px;
margin:0px auto 0px auto;
}
#boxcontainer {
width:100%;
background:#f8f8f8;
font-size:0;
text-align:center;
}
.box {
width:225px;
height:200px;
display:inline-block;
background:#ccc;
font-size:18px;
margin:0px 20px 20px 0px;
}
.box:last-child {
margin-right:0px;
}
HTML
<div id="wrapper">
<div id="boxcontainer">
<div class="box">
<h3>Test</h3>
</div>
<div class="box">
<h3>Test</h3>
</div>
<div class="box">
<h3>Test</h3>
</div>
<div class="box">
<h3>Test</h3>
</div>
</div>
</div>
Add float:left to your box class.
If you want to solve this on a specific media device use media query.
The margin-right:0px; on the the last div is causing the spacing issue. If i remove that, it seems to be fine. http://jsfiddle.net/ve2fyrh7/2/.
I'm making a website using Bootstrap and Wordpress. It's a 2-column layout - left sidebar, right content. The right content is dynamic and expands by infinite scroll. I've tried to make the left sidebar 100% height through several techniques but to no avail.
I'd like the sidebar to continue down according to the size of the viewport/height of the right content div.
I've made a bare fiddle: http://jsfiddle.net/ydPMr/3 but it would be better if you saw what I was talking about on my dev page: http://joshuawalker.koding.com.
Here is the basic structure of my page:
<div class="navbar navbar-inverse navbar-static-top">
<div class="navbar-inner"></div>
</div>
<div class="wire-unit hero-fix">
</div>
<div class="sidebar hidden-phone"></div>
<div class="content"></div>
If anyone has any ideas on how to make the sidebar to stretch full height, I would appreciate it.
Thanks!
This is working fine for me. Fiddle
I set the min-Height to 500px. If you don't want minimum, remove it. It will work according to the height of your content in the content div. Like this Fiddle
<div class="wrapper">
<div class="sidebar hidden-phone">
</div>
<div class="content">
</div>
</div>
and style
<style type="text/css" >
.wrapper
{
min-height:100%;
width:100%;
position:relative;
background-color:Black;
display:inline-block;
}
.sidebar
{
width:20%;
top:0px;
left:0px;
bottom:0px;
position:absolute;
background-color:Aqua;
}
.content
{
min-height:500px;
width:80%;
position:relative;
background-color:Gray;
float:right;
}
</style>
I want to make a simple two column layout, where the right column is out of the container but still makes the container height expand.By using position:absolute it goes were it should but dosent expand.
This is the html code
// Note: I dont add the head tag to save space in here :)
<html>
<body>
<div id="container">
<div id="left">
</div>
<div id="right">
</div>
</div>
</body>
</html>
And the css code
#container {
width:900px;
margin:0 auto;
}
#left {
width:700px;
float:left;}
#right{
width:230px;
margin-left:760px;
position:absolute;
}
I cant use float:right, because it will floated to the right of the container. Maybe the structure has to be different I dont know.
Try setting a position: relative on #right, and giving it a margin-left greater than the width of the container: http://jsfiddle.net/8MEqL/
I'm working on a website that uses two columns inside a container. The container has a white background that should stretch to the bottom of whichever column is highest, so I'm using the holy grail method for that.
However, both columns should positioned so that a part of it exceeds the white background (this example uses a fixed height, which should be fluid). As far as I know, this can only be done by setting the overflow to visible but this break the equal height of the columns.
How do I fix this with as little additional elements as possible?
The easiest fix in this case seems to be adding <br style="clear:both" /> before the closing tag for #container.
You can change it to <br class="clearfix" /> and .clearfix{clear:both} if you wish.
Solution is to use inline-block elements..
Css
.container{
width:300px;
background-color:#ccc;
margin:0 auto;
border:1px solid red;
}
.container > div{
width:150px;
display:inline-block;
vertical-align:top;
}
.inner{
background-color:#666;
margin-top:10px;
width:130px;
}
.left .inner{
margin-left:-10px;
}
.right .inner{
margin-right:-10px;
margin-left:auto;
}
HTML
<div class="container">
<div class="left">
<div class="inner">left 1st inner panel</div>
<div class="inner">left 2nd inner panel</div>
</div><div class="right">
<div class="inner">right 1st inner panel</div>
<div class="inner">right 2nd inner panel with arbitrary text to show the increase in parent elements</div>
</div>
</div>
view demo