CSS and responsiveness in multiple columns with fixed and scaleable elements can be done many ways.
I have created a solution that seems to work, though I have no idea whether this is best practice. Really would appreciate the Stack Overflow community looking at it and providing some feedback.
Fiddle:
http://jsfiddle.net/brandrally/ZDt6N/
CSS
html, body { margin:0 auto; padding:0; background: #fff; text-align: center; }
/* Clearfix
============================================================================ */
.CF { display:inline-block;overflow:hidden; }
/* IE mac \*/
.CF { display:block; }
/* Elements
============================================================================ */
div#container {max-width: 1140px; min-width: 960px; margin:0 auto; margin-top: 10px; padding:0; background:#0F9; position:relative;}
div#left-menu {width: 100px; background:#F30; position: absolute; top:0; left:0; }
div#information {padding: 10px 10px 25px 10px; background:#39C; margin-left:100px;}
div#information-wrapper {position:relative; background:#3FF; }
div#information-left-menu {width: 125px; background:#C30; position: absolute; top: 0; left:0;}
div#content {background:#FC0; margin-left: 125px; text-align:left;}
HTML
<div id="container" class="CF" >
<!-- This is fixed Width -->
<div id="left-menu">
<p>Left 100px wide </p>
</div>
<!-- Width scales to size of Container -->
<div id="information" class="CF">
<div id="information-wrapper">
<div id="information-left-menu">Fixed width of 125px </div>
<div id="content">text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </div>
</div>
</div>
</div><!-- / END / Container / -->
Related
I have a div, with a few input boxes in a div and my div has a fixed height. I would like for this to overflow to the right instead of the bottom.
JSFiddle
<div>
<input type="text"/><br>
<input type="text"/><br>
<input type="text"/><br>
<input type="text"/><br>
<input type="text"/><br>
<input type="text"/><br>
<input type="text"/><br>
<input type="text"/><br>
<input type="text"/><br>
<input type="text"/><br>
<input type="text"/><br>
<input type="text"/><br>
<input type="text"/><br>
div {
overflow:hidden;
white-space:nowrap;
width:200px;
height:100px;
}
Use display:inline-block for the content elements you want to be horizontally scrolled, and add white-space:nowrap; to the container.
example: http://jsfiddle.net/4Lex5wdo/
#container {
width:500px;
background-color: #CCC;
overflow: auto;
height: 100px;
white-space:nowrap;
}
.contents {
width: 200px;
height: 60px;
display:inline-block;
margin-right:20px;
}
#one {
background-color:#ABC;
overflow-y: auto;
white-space: normal;
}
#two {
background-color:#333;
}
#three {
background-color:#888;
}
#four {
background-color:#E29E1E;
}
<div id="container">
<div class="contents" id="one">
text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
</div>
<div class="contents" id="two"></div>
<div class="contents" id="three"></div>
<div class="contents" id="four"></div>
</div>
Update
If you want the divs inside the container to be scrollable just add overflow-y: auto; white-space: normal; to the elements you want, for example if you want just the first div #one to be scrollable as you mentioned on your comment, do this:
#one {
background-color:#ABC;
overflow-y: auto;
white-space: normal;
}
if you want all of the divs inside of it to be scrollable give this properties to the class that they all have instead which is .contents:
.contents {
width: 200px;
height: 60px;
display:inline-block;
margin-right:20px;
overflow-y: auto;
white-space: normal;
}
You can check the live example here on Jsfiddle or run the code snippet, it's already updated.
In order for you to do this, you have to get rid of the breaklines (<br>), and you have to add overflow-x:scroll; to your css code for the div.
You need to also set the inputs to have a display:inline-block; property.
If you want to keep the breaklines, the only way the div will overflow is if the div has less of a width than the components within it (in this case: the input fields).
Fiddle
Fiddle: http://jsfiddle.net/y8d2q3ww/2/
.flex-container{display:flex;width:100%}
.square{flex-basis:55px;background:yellow}
<div class='flex-container'>
<div class="square">M</div>
<div class="text">some text some text some text some text some text some text some text some text </div>
</div>
Only when the text doesn't wrap, the .square's width will be 55px as the flex-basis property sets; but if the text is more than one line, the actual width will be scaled down. So what is behind this? And how do I make the .square area have a fixed width(be it px or %) no matter what content the other flex items hold?
.square shrinks if .text overflows, because you did not specify flex-shrink, which defaults to 1.
Set it to 0 to get the desired result:
.flex-container {
display: flex;
width: 100%
}
.square {
flex-basis: 20%;
flex-shrink: 0;
background: yellow
}
<div class='flex-container'>
<div class="square">M</div>
<div class="text">some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text</div>
</div>
Hi im having a problem where i cant get two images positioned within a div (see jsfiddle: http://jsfiddle.net/edddotcom/naEFm/)
i want the two triangles/arrows (class "triangle") to be at the top right and bottom right of the dark grey grey div (id "main")
I need all the other elements positioned as they are (the menu on the left and main content on the right
HTML:
<div id="page">
<div id="container">
<div id="menu">
<ul class="slidingMenu">
<li>LINK1</li>
<li>LINK2</li>
<li>LINK3</li>
<li>LINK4</li>
<li>LINK5</li>
<li>LINK6</li>
</ul>
</div>
<div id="main">
<h1>Heading</h1>
<div id="content">
<img id="mainimg" src="http://onlyhdwallpapers.com/wallpaper/ball_monochrome_desktop_1680x1050_hd-wallpaper-183077.jpg"/>
<p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </p>
</div>
<div class="structure">
<img id="up" class="triangle" src="http://f0.bcbits.com/z/26/17/2617229726-1.jpg"/>
<img id="down" class="triangle" src="http://f0.bcbits.com/z/26/17/2617229726-1.jpg"/>
<div>
</div>
</div>
</div>
CSS:
body{
background:#292929;
font-family: Arial, Helvetica, sans-serif;
}
#page{
display:inline-block;
text-align:center;
width:100%;
}
#container{
display:block;
background-color:red;
width:900px;
height:400px;
text-align:center;
}
#menu{
display:inline-block;
background-color:white;
width:40%;
overflow:none;
float:left;
}
ul{
list-style:none;
text-align:right;
}
ul a{
font-size:50px;
text-decoration: none;
line-height: 50px;
padding-right:10px;
color: #ddd;
}
ul a:hover{
background-color:#999967;
}
#main{
background-color:grey;
width:60%;
float:right;
max-height:330px;
}
#mainimg{
width:40%;
float:left;
margin:10px;
max-height:300px;
}
#main p{
text-align:justify;
padding-left:10px;
padding-right:10px;
margin-top:0px;
}
#content{
max-height:250px;
overflow-y:auto;
}
.structure{
display:block;
height:40px;
background-color:white;
width:20px;
}
#up{
position:absolute;
top:0px;
right:0px;
height:20px;
width:20px;
}
#down{
-webkit-transform: scaleY(-1);
position:absolute;
bottom:0px;
right:0px;
height:20px;
width:20px;
}
If you could edit the jsfiddle with what you think is best that would be great
Add position:relative to #main:
#main {
background-color:grey;
width:60%;
float:right;
max-height:400px;
position:relative;
}
jsFiddle example
you need to position:relative; the arrow images, so that they will stay with in the #main div, see the position:relative; tells the browser that the arrows must be positioned relative to the main div, "or watever div its directly in", (otherwise the position:absolute; will be positioned relative to the whole <body> tag automatically. Hope this helps you understand the problem peace!
I have a liquid layout page that has a max and min width of the body set (1260px and 960px, respectively). I have a left-hand sidebar that takes up the left 25% and the content which takes up the right 75% of the screen. Within the content I have placed two div containers with fixed width pictures in them (300px x 225px) with some text below each.
What I would like to do is to have those div boxes remain their own static width (300px as determined by the width of the picture above the text) but to be able to remain, for argument's sake, 50px apart inline and always in the center (bar the 50px apart) despite what browser I have them in (either the 1260 or 960px, or somewhere inbetween). The reason that I would like this is that if I use margin to separate them they only look 'centered' (again, bar the 50px in between them) in one browser width and aren't liquid in their layout.
JSFiddle: http://jsfiddle.net/fpN5t/1/
Please let me know if I'm not explaining myself very well!
Thank you so much in advance.
<div id="content">
<div id="upper-left-box">
<img class="boxed-content-image" src="images/Leaf 300x225px.jpg" alt="" />
<p>Example text example text example text example text example text example text example text example text example text</p>
</div>
<div id="upper-right-box">
<img class="boxed-content-image" src="images/Lens 300x225px.jpg" alt="" />
<p>Example text example text example text example text example text example text example text example text example text</p>
</div>
<h1 class="first-content-heading">Heading 1</h1>
<p>Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here.</p>
<p> </p>
<h2>Heading 2</h2>
<p>Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here.</p>
<p> </p>
<h3>Heading 3</h3>
<p>Your text goes here. Your text goes here. Your text goes here. Your text goes here. Your text goes here.</p>
<p> </p>
</div>
#content {
width: 75%;
float: left;
margin: 0;
background: #FFF;
}
#upper-left-box {
width: 300px;
margin: 0 auto;
position: relative;
text-align: center;
float: left;
}
.boxed-content-image {
width: 300px;
height: 225px;
}
#upper-right-box {
width:300px;
margin: 0 auto;
position: relative;
text-align: center;
float: left;
}
.first-content-heading {
clear: both;
}
You can center the upper boxes by putting a container around them with margin auto. Then you can place a 50px margin in between the boxes for the effect you are looking for"
http://jsfiddle.net/fpN5t/2/
<div class="upper-boxes">
<div id="upper-left-box">
<img class="boxed-content-image" src="images/Leaf 300x225px.jpg" alt="" />
<p>Example text example text example text example text example text example text example text example text example text</p>
</div>
<div id="upper-right-box">
<img class="boxed-content-image" src="images/Lens 300x225px.jpg" alt="" />
<p>Example text example text example text example text example text example text example text example text example text</p>
</div>
</div>
.upper-boxes{ width: 650px; margin: 0 auto; }
#upper-left-box {
width: 300px;
margin:0 50px 0 0;
position: relative;
text-align: center;
float: left;
}
.boxed-content-image {
width: 300px;
height: 225px;
}
#upper-right-box {
width:300px;
position: relative;
text-align: center;
float: left;
}
Hopefully I understood the problem correctly, if not please indicate.
I would like to do this using CSS:
Ssing only ul li, and a elements. The red bullets would be invisible.
How can I do this? I've tried using float:left for the horizontal outer bullet list and a normal vertical bullet list for the inner one, but it did not works.
Is there a better way than bullet list?
I'm just going to throw this out there as a viable solution. Why not use div elements? Here's an example:
CSS --
.container {
width : 400px;
margin : 0;
padding : 0;
}
.col {
display : inline-block;
width : 100px;
vertical-align : top;
}
.col.double {
width : 200px;
}
HTML --
<div class="container">
<div class="row">
<div class="col">9</div>
<div class="col">0</div>
<div class="col">TITLE</div>
</div>
<div class="row">
<div class="col double">{image}</div>
<div class="col">text text text text text text text text text text text text text text text text text text </div>
</div>
</div>
Here is a demo: http://jsfiddle.net/a9m76/1/