I am trying to make it possible to align divs with a lot of text horizontally, so you can scroll through them horizontally. Not really experienced and I can't figure out what I am doing wrong..
Here is my css:
#content {
font-size: 18px;
text-align: justify;
display: inline-block;
vertical-align: middle;
overflow-x: auto;
height: 70%;
margin-top: 15%;
margin-bottom: 15%;
}
.item {
width: 50%;
max-height: 70%;
margin-bottom: 30px;
margin-top: 100px;
margin-left: 25%;
margin-right: 25%;
overflow: scroll;
}
Thanks!
I assume you want to put multiple .items into the #content and they should then wrap horizontally. Is that correct?
You would then need a wrapper over your #content that has a fixed width (this is going to be your 'scroll window'). The #content itself needs to be wider so that you can scroll it while the wrapper needs the property overflow-x:scroll. Since you don't know how wide your #content should be (except if you know the number of .item divs) I suggest to set it with Javascript. Finally it's important to have float: left in your .item, otherwise they won't wrap horizontally.
Additionally you could let JS set your #contents height to the heighest .item if you don't want this to be same for all .items.
Take a look at this fiddle if this is what you try to achieve.
Optionally you could use css3 columns. However you wouldn't yet use it, as you won't have any support for IE9 and below. See here how this works.
Cheers!
Related
I've tried to align last div element / elements using text-align-last property but it didn't work. I have much divs in the center, but my page is different on each resolution so I can't control if elements will be perfectly and none of them will be in last line alone or so, that's why I want to align them to left.
Fiddle: http://jsfiddle.net/ecn8c0pt/
Picture of my site:
Adding the following CSS will work.
http://jsfiddle.net/ecn8c0pt/1/
#gallery h2{
margin: 0;
height: 80px; /*Added height for the Heading */
font-size: 1.1em;
font-weight: 300;
color: #33CCFF;
}
.project{
display: inline-block;
margin: 0 15px 40px;
width: 156px; //To show in jsfiddle i reduced the width.
text-align: left;
float: left; //MUST CHANGE: Once you align left it will automatically float to left. Also the number of count per row will depends on the window width and div width.
}
.project .thumbnail{
width: 156px;//To show in jsfiddle i reduced the width.
height: 144px;
border-radius: 3px;
}
try adding styles to your CSS like these:
float:left;
min-width: 200px;
max-width: 200px;
and try to fix the width for the wrapping div tag
for example:
.wrapper {
width:1000px;
}
see in example DEMO and try to predict the width now when you control it good luck!
I have 2 simple intertwining issues related to my Unordered List which have caused me hours of headache. Each li within the ul contains 1 image, and 3 divs. The divs are titlebox, locationbox, and pricebox. There is text inside each of these divs. A JsFiddle demo is below along with a screenshot of what I need.
The li looks like:
<li>
<center><img src="LINK_TO_PHOTO"></center>
<div class="titlebox">Circa 1930 on the River</div>
<div class="locationbox">Lawrencetown</div>
<div class="pricebox">Offered at $249,000</div>
</li>
My issues are:
I want the titlebox (and the text within it) to stretch the exact width as the image above it, so there's no overhang. This means the text will have to get bigger if the user's monitor is larger, because the image width is a % and is responsive, so the text-size must be responsive as well.
I also need the pricebox (bottom div) to sit at the bottom of the green box. And I want the location box to sit equally between the titlebox above, and the price box below.
The 3rd box has a title of 2 lines, but I still need the location "Medford" to be aligned with those to the left. So I can't use a margin-top: % here because it would push the third box's location/price down too far (since the 2 lined title).
Here is a screenshot of what I need. Screenshot
See how I need the title and price to stretch the same width as the image?
And here is what it currently looks like: jsFiddle
Any help whatsoever would be great! Thank you so much
I use the following to horizontally center block and inline elements...
CSS Class
.center
{
margin-left: auto;
margin-right: auto;
text-align: center;
}
Note you will in some circumstances need to apply the CSS class to the parent element instead of directly to the element itself. Additionally if the width of the parent element is collapsed (e.g. using a float) you'll have to center that element as well by moving the class to the parent element's parent.
I am not sure this is the best way to solve your price spacing issue, but since you know there are 3 divs and one image, you could simply divide the height of a parenting div. Something like this:
#pictureBox
{
margin-left: auto;
margin-right: auto;
height: 50%;
}
#titleBox
{
margin-left: auto;
margin-right: auto;
text-align: center;
height: 25%;
}
#locationBox
{
margin-left: auto;
margin-right: auto;
text-align: center;
height: 15%;
}
#priceBox
{
margin-left: auto;
margin-right: auto;
text-align: center;
height: 10%;
}
I am sure you will have to play around with the percentages until you find a reasonable space you like, but I think that would distribute the space properly.
Here's what I came up with given some of the things you were looking for: http://jsfiddle.net/00gdax7m/8/
.titlebox {
width: 80%;
display: inline-block;
font-size: 17px;
font-size: 1.9vw;
margin-left: 10%;
margin-right: 10%;
line-height: 100%;
font-family: Garamond;
color: #002000;
text-align: center;
height: 20%;
}
.locationbox {
width: 100%;
display: inline-block;
font-size: 25px;
line-height: 100%;
font-family: Garamond;
color: #002000;
font-style: italic;
text-align: center;
height:20%;
}
.pricebox {
position:relative;
bottom:0;
width: 100%;
font-size: 32px;
line-height: 100%;
text-align: center;
font-family: Garamond;
color: #002000;
height: 20%;
}
.houseImage
{
margin-left: auto;
margin-right: auto;
text-align: center;
margin-top: 5px;
height: 36%;
}
Key notes:
I found an answer here which explains the use VW units which helps with your font sizing. The answer says to be careful of browser compatibility though. Pure CSS to make font-size responsive based on dynamic amount of characters
As another user mentioned. Make sure you are using CSS correctly to center.
To make your elements evenly space adjust the height % of your divs within the li (BlueBaroo answered similarly while I was typing)
I am trying to make an image scroller and I am stuck with my CSS side of things. The current CSS that I have is making them going under each other not next to each other and I can't figure out how to make it work that way.
The Images are stored in a div of themselves which are under a another div called imageScroller and the imageScroller div is under the Content div.
Here is the CSS of the following divs
#content
{
text-align: center;
padding: 20px;
}
#imageScroller{
margin: 0 auto;
width: 850px;
height: 250px;
overflow: hidden;
}
.image{
float: left;
}
I think what you want is achieved by adding white-space: nowrap to #imageSlider and changing .image so that instead of float: left, it is display: inline-block.
Here's a fiddle. Adjust as needed.
The font-size: 0 in #imageSlider is to get rid of extra white space in between the <div>s.
I have the following in my CSS. All margins/paddings/borders are globally reset to 0.
#wrapper{width: 75%; min-width: 800px;}
.content{text-align: justify; float: right; width: 90%;}
.lbar{text-align: justify; float: left; width: 10%;}
Now when I write my HTML as
<div id="wrapper">
<div class="content">
some text here
</div>
<div class="lbar">
some text here
</div>
</div>
the page renders correctly. However, when I inspect the elements, div#wrapper is shown as being 0px high. I would've expected it to expand till the end of div.content and div.lbar... Why does this happen?
Again, the page renders fine. This behaviour just perplexes me.
Content that is floating does not influence the height of its container. The element contains no content that isn't floating (so nothing stops the height of the container being 0, as if it were empty).
Setting overflow: hidden on the container will avoid that by establishing a new block formatting context. See methods for containing floats for other techniques and containing floats for an explanation about why CSS was designed this way.
Ordinarily, floats aren't counted in the layout of their parents.
To prevent that, add overflow: hidden to the parent.
I'm not sure this is a right way but I solved it by adding display: inline-block; to the wrapper div.
#wrapper{
display: inline-block;
/*border: 1px black solid;*/
width: 75%;
min-width: 800px;
}
.content{
text-align: justify;
float: right;
width: 90%;
}
.lbar{
text-align: justify;
float: left;
width: 10%;
}
Now, you can
#wrapper { display: flow-root; }
Compatibility https://caniuse.com/flow-root
History https://css-tricks.com/snippets/css/clear-fix/
Hi I am having trouble getting a div to stay in place when the window is resized. It overlaps the content div when its made smaller.
#content
{
width: 70%;
height: 800px;
margin-top: 50px;
margin-left: auto;
margin-right: auto;
background-color: #202020;
padding: 30px;
}
#login
{
float: right;
margin-right: 20px;
margin-top: 50px;
background-color: #4A4344;
width: 200px;
height: 220px;
text-align: center;
}
I tried to set the values to em and percentages but I cannot seem to get it working.
Thanks for any advice.
This is because the content div's width is set to 70% of the browser's window, and will ignore the login div entirely. Try instead to float both the elements. If you set both element's css to float: right;, put the login before your content in the html, and remove the width property from the content's css, then it should view how you want it.
Try white-space: nowrap