with the code below I am trying make "ThumbNails" as large as the contet (dynamic) requires and show (only) an horizontal scrollbar if not fitting in the contining div but I am failing.
What am I doing wrong?
html:
<body>
<div id="Fascione"></div>
<div id="Wrapper">
<div id="Menu"></div>
<div id="Contenuto">
<div id="VariableImg"></div>
<div id="Back"></div>
<div id="Next"></div>
<div id="ThumbNails">
<img><img><img>
</div>
</div>
</div>
<div id="Footer"></div>
</body>
css:
body{width:1024px; margin:0px auto;}
div#Fascione{width:inherit;min-height:125px;border-bottom:2px solid black;}
div#Wrapper{width:inherit;padding:8px 0px 4px 0px;}
div#Wrapper{width:inherit;padding:8px 0px 4px 0px;}
div#Menu{float:left;width:200px;}
div#Contenuto{overflow:hidden;margin-left:208px;}
div#Back, div#Next{width:49%;cursor:pointer;text-align:center;margin:1% auto;border:1px dotted #1111cc;background-color:#ffffff;}
div#Back{float:left;}
div#Next{float:right;}
div#Back:hover, div#Next:hover{border:1px solid #1111cc;}
div#ThumbNails{clear:both;max-height:180px;overflow-x:auto;overflow-y:hidden;background-color:#f0f0f0;}
div#Footer{clear:left;width:inherit;} /* clear left needed in combination with the overflow:hidden of Contenuto */
Edited: removed old, invalid link.
As pointed out by #My Head Hurts the proper answer is to add white-space:nowrap;.
Related
I just started with bootstrap and I'm about to build a grid for my layout.
I want to add background colors to my grid elements, so I tried to add custom classes like .logo { background-color: #202020; } to the corresponding div. But adding the class - only with color attribute! - changes the width of the div (see screenshot)? I can't explain this.
I already searched for this problem, but adding a custom class seems to be best practice for adding background colors etc.
Screenshot
So here is the code -
HTML
<div class="container main-container">
<div class="row">
<!-- navigation -->
<div class="col-md-2 nav">
<!-- logo -->
<div class="row">
<div class="col-md-12 logo">
<h1>Logo</h1>
<h2>Dashboard</h2>
</div>
</div>
<!-- user info -->
<div class="row">
<div class="col-md-12 user">
profile pic
</div>
</div>
<div class="row">
<div class="col-md-12 user">
more lorem ipsum
</div>
</div>
</div>
<!-- content -->
<div class="col-md-10">
<div class="row">
<div class="col-md-12">
Some lorem ipsum
</div>
</div>
</div>
</div>
</div>
& adding bootstrap.min.css in the head
CSS
body {
background-size: cover;
}
.main-container {
margin-top: 5%;
background-color: #f6f5f1;
-webkit-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.75);
box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.75);
}
/* sidebar styling */
.nav {
background-color: #2b2b2b;
color: #fff;
}
.logo {
background-color: #202020;
}
.user {
}
Fiddle: https://jsfiddle.net/e1vx1mhb/
Well - I already found a "workaround". I added background colors to the following rows, too, and they become wider as well. But I don't think this is the best solution.
So any thoughts? Thank you!
It happens because of the padding. If you don't use box-sizing:border-box; and add background to that bootstrap column, the background applies to the padding as well. I've added this global rule to your jsfiddle:
* {
box-sizing: border-box;
}
and it all works how you intended. Read up on box-sizing, I always use border-box when I build my sites, this way there is no surprises when it comes to sizes of the elements when I add padding or border.
https://jsfiddle.net/e1vx1mhb/1/
Find the updated FIDDLE
Adding clearfix class instead of row for inner DIVs will solve your problem and comment background-size: cover; css property.
I'm having a small HTML/CSS Bootstrap problem here. Basically I have a span4 with a picture on the left side then a span8 with a paragraph describing the picture on the right side.
<div class="container">
<div class="cent text-center">
<div class="row box" style="border:1px solid #CCC; padding:15px 0px 15px 0px;">
<div class="span4" style="height:200px;"><div class="profile pro"><img src="http://icons.iconarchive.com/icons/deleket/sleek-xp-software/256/Yahoo-Messenger-icon.png" /></div><!----profile END---></div><!---span4--->
<div class="span8 section">
<h3 align="center">Title</h3>
<div class="team">
<p class="team">this is the description about the picture this is the description about the picture this is the description about the picture this is the description about the picture.</p>
</div><!---team END--->
</div><!---span8--->
</div><!---Row END--->
</div><!----cent END--->
</div><!--container END-->
.cent{
text-align:center;
margin:auto;
width:auto;
}
.section {
padding-top:20px;
margin:auto;
}
.team {
text-align:center;
margin:auto;
max-width:600px;!important
padding-left:20px;!important
padding-right:20px;!important
}
.profile {
max-width:200px;
text-align:center;
margin:auto;
padding-top:10px;
}
.pro {
padding-left:100px;!important
}
.box {
background:#FFF;
border:1px solid #CCC;
box-shadow: 0px 1px 1px #CCC;
padding: 0px 20px 20px 0px;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
min-height:220px;
}
Now the only thing I want to do is invert the code so that the picture is now on the left and the description on the right but it seems when I do that the span4 does not go on the side of the span8 but instead under it.
<div class="container">
<div class="cent text-center">
<div class="row box" style="border:1px solid #CCC; padding:15px 0px 15px 0px;">
<div class="span8 section">
<h3 align="center">Title</h3>
<div class="team">
<p class="team">this is the description about the picture this is the description about the picture this is the description about the picture this is the description about the picture.</p>
<div class="span4" style="height:200px;"><div class="profile pro"><img src="http://icons.iconarchive.com/icons/deleket/sleek-xp-software/256/Yahoo-Messenger-icon.png" /></div><!----profile END---></div><!---span4--->
</div><!---team END--->
</div><!---span8--->
</div><!---Row END--->
</div><!----cent END--->
</div><!--container END-->
You have a lot of unnecessary code in there. Maybe this is not exactly what you are looking for but instead of trying to figure out the code you provided, I just started fresh and provided a much cleaner way of doing what you want to accomplish.
You should modify your question as you ask for what already is. At the top you say: "basically I have a span4 with a picture on the left side then a span8 with a paragraph describing the picture on the right side." but then down below you say "now the only thing I want to do is invert the code so that the picture is now on the left and the description on the rite but it seems when I do that the span4 does not go on the side of the span8 but instead under it."
the key is to use the "float" property.
here is the html:
<div class="container">
<div class="span4">
<img src="http://icons.iconarchive.com/icons/deleket/sleek-xp-software/256/Yahoo-Messenger-icon.png" />
</div>
<div class="span8">
<div class="span8-text">
<h3>Title</h3>
<p>this is the description about the picture this is the description about the picture this is the description about the picture this is the description about the picture.</p>
</div>
</div>
</div>
and the css:
.container {
position: relative;
clear: both;
text-align: center;
}
.span4 {
float: right;
width: 200px;
}
.span8 {
position: relative;
float: left;
width: 350px;
}
here is the jsfiddle: http://jsfiddle.net/h69Bh/
Use CSS float property span8 float:left and span4 float:right
Take a look DEMO
This is it:
add this in head section below all links to bootstrap cdn :
<style>
img{
width: 100%;
height: 100%;
}
</style>
and this in body tag:
<div class="container img-responsive">
<div class="row">
<div class="col-8 col-sm-8 col-md-8 col-lg-8 col-xl-8">
description goes here
</div>
<div class="col-4 col-sm-4 col-md-4 col-lg-4 col-xl-4">
<img src="1.jpg">
</div>
</div>
<div>
check responsiveness:https://jsfiddle.net/sugandhnikhil/c0zoq8e1/1/
I'm going for three columns (I didn't want this originally but it looks best for my project). The right-hand one is insisting on staying below the middle one even while it floats on the right. What should I change?
The whole thing will actually be put inside another div, but that doesn't seem to be relevant. I've simplified the code down to the problematic area:
<style>
.contain {
border:1px solid;
width:639px;
height:500px;
}
.subAreaLeft{
float:left;
position:relative;
width:205px;
border:1px solid;
}
.subAreaMid{
margin: 0 auto;
position:relative;
width:205px;
border:1px solid;
}
.subAreaRight{
width:205px;
position:relative;
float:right;
border:1px solid;
}
</style>
</head>
<body>
<div class="contain">
<div class="subAreaLeft" id="contactInfo">
ONE
</div>
<div class="subAreaMid">
TWO
</div>
<div class="subAreaRight">
THREE
</div>
</div>
</body>
In order for all three of the divs to float to the left, all three of the divs need float: left in the CSS.
<body>
<div class="contain">
<div class="subAreaLeft" id="contactInfo">
ONE
</div>
<div class="subAreaRight">
THREE
</div>
<div class="subAreaMid">
TWO
</div>
</div>
</body>
you just need to put middle DIV after the THird
http://jsfiddle.net/zJkHE/ check this
The solution is not to modify any CSS. Leave that alone.
Instead, move the subAreaMid div to directly after subAreaRight in the HTML.
<div class="subAreaLeft" id="contactInfo">
ONE
</div>]
<div class="subAreaRight">
THREE
</div>
<div class="subAreaMid">
TWO
</div>
This ensures that the subAreaMid div will not clear, and gives the desired result.
I'm having some issues trying to write CSS to make a box float to the right of my page.
I have a div called #right-box-uploadphoto that is the grey box on this page http://s361608839.websitehome.co.uk/salesboard/After_Login.html
The CSS is this:
#right-box-uploadphoto{
width: 240px;
height: 240px;
background: #e6e6e6;
border: 1px solid #d7d7d7;
margin-left: 15px;
float: right;
}
It's somehow being pushed down. It needs to line up with #page-box2.
Is this not right?
Thanks
You placed the div incorrectly on your page. Try adding your div to your mainFrame like:
<div id="mainFrame">
<h2>Set up your Salesboard</h2>
<p>There's only a few steps to go!</p>
<div class="line"></div>
<div id="page-box2">
<div id="step-box-select"><span class="icon-step">1</span> Set Up Your Profile</div>
<div id="step-box-unselect"><span class="icon-step">2</span> Set Up Your Team</div>
<div id="step-box-unselect"><span class="icon-step">3</span> Add Team Member</div>
<br><br>
<form action="" method="get">
</form>
Upgrade</div>
<div id="right-box-uploadphoto"></div>
</div>
Try putting "right-box-uploadphoto" div into the "mainFrame" div.
<div id="mainFrame">
...
<div id="page-box2"></div>
<div id="right-box-uploadphoto"></div>
</div>
That will do the trick!
I have three divs and one main div:
<div id="container" style="width:100%;">
<div id="left" style="width:201px; float:left;">
....
</div>
<div id="centre" style="float:left;">
....
</div>
<div id="right" style="width:135px; float:right;">
....
</div>
</div>
How it is possible to make centre div max width, so that
containerDivWidth = leftDivWidth+ rightDivwidth + centreDivWidth;
This will allow for you to have fixed right and left columns and a flexible center portion:
CSS
<style type="text/css">
#left {
float: left;
width: 201px;
border: 1px solid red;
}
#centre {
display: block;
overflow: auto;
border: 1px solid green;
}
#right {
float: right;
width: 135px;
border: 1px solid blue;
}
</style>
HTML
<div id="container" style="width:100%;">
<div id="left">Left</div>
<div id="right">Right</div>
<div id="centre">Middle</div>
</div>
I believe that what you are trying to achieve is the "Holy Grail" layout.
There is a great List Apart article about this Layout, you should check it:
http://www.alistapart.com/articles/holygrail
What I've previously done, is to set centre to have a left margin of 201px, and a right margin of 135px. Set it to relative positioning (instead of floating it), and then it should fill the entire remaining space in between the left and right columns.
I can't seem to find one of my old code examples, so this is the best I can do at the moment. Hope it helps!
This might help:
http://matthewjamestaylor.com/blog/holy-grail-no-quirks-mode.htm
(source: matthewjamestaylor.com)
You cannot mix relative and fixed width which is in my opinion a shortcoming in CSS.
The best you can do is something like:
<div id="container" style="width:100%;">
<div id="left" style="width:20%; float:left;">
....
</div>
<div id="centre" style="width:65%; float:left;">
....
</div>
<div id="right" style="width:15%; float:right;">
....
</div>
</div>
I'll be very happy if I'm wrong.