I have this HTML:
<div class="styles container">
<h1>Styles</h1>
</div>
<div class="preview container">
<h1>Preview</h1>
</div>
I want the first div to be static. Let's say its width is to be 265 pixels. The .preview div should be next to it, but it should be responsive (by shrinking the window this div should also shrink). I tried with setting a % to this div, but still it goes below. How can I fix this?
First of all, DIV it's block element, and starts rendering from new line. There are few techniques to change the behavior. If you don't need to support IE6/IE7 you can use inline-block CSS style, e.g:
<div>
<div style="width:20%; display: inline-block;">
<h1>1</h1>
</div>
<div style="width:70%; display: inline-block;">
<h1>2</h1>
</div>
</div>
This is your solution:
HTML:
<div class="parent">
<div class="styles">
<h1>Styles</h1>
</div>
<div class="preview">
<h1>Preview</h1>
</div>
</div>
CSS:
.parent{
width:100%;
white-space: nowrap;
}
.styles{
width:265px;
display:inline-block;
}
.preview{
width:auto;
display:inline-block;
}
Hope it will solve you problem.Check Fiddle.
Related
How do I format my CSS so that the text inside "header-right" should be aligned at the bottom while my image at "header-left" is aligned at the top?
Here's my html:
<div class="container">
<div class="header-left;">
<img src="img1.png">
</div>
<div class="header-right;">
<div style="float:left;">
This text should be at the bottom.
</div>
<div style="float:left;">
This text should be at the bottom also.
</div>
</div>
</div>
Thanks.:)
From your class-naming I suppose you want both texts to the right of the image, bottom-aligned with the image?
To achieve this, apply display: inline-block to all DIVs , in addition apply display: block; to the image to avoid any space at its bottom:
.header-left,
.header-right,
.header-right div {
display: inline-block;
}
.header-left img {
display: block;
}
<div class="container">
<div class="header-left">
<img src="http://placehold.it/80x120">
</div>
<div class="header-right">
<div>
This text should be at the bottom.
</div>
<div>
This text should be at the bottom also.
</div>
</div>
</div>
BTW: Don't use a semicolon in class="header-right" (inside your DIV-tags) and similar.
You can displat the .container as a table and the .header-right and .header-left as table cells. This way, you can align the contents vertical bottom (or even top or middle)
See snippet below
.container{
display:table;
}
.header-left,.header-right{
display:table-cell;
}
.header-right{
vertical-align:bottom;
}
.header-right *{
display:table-cell;
}
<div class="container">
<div class="header-left">
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSYTogPdYlS2zHfImUPfjdkO1v0793TjQMD2qjLoY7qNkqCUN_-dA">
</div>
<div class="header-right">
<div style="">
This text should be at the bottom.
</div>
<div style="">
This text should be at the bottom also.
</div>
</div>
</div>
I am currently making a website for a college task and I am really confused on why the div I am trying to create is not appearing.
It doesn't seem to work since I added the code for the three boxes, they are meant to be the same width as the three boxes.
JsFiddle
<div id="wrapper">
<div id="top">
<div class="logo"> </div>
</div>
<div id="menu">
<div class="button"> Home </div>
<div class="button"> Destinations </div>
<div class="button"> Make A Booking </div>
<div class="button"> Things To Do </div>
<div class="button"> Contact Us </div>
</div>
<div id="box">
content here
</div>
<div id="threeBoxContainer">
<div id="deal_one"></div>
<div id="deal_two"></div>
<div id="deal_three"></div>
</div>
</div>
You just need to add box-sizing property
#deal_one {
/*Other Style */
box-sizing:border-box;
}
#deal_one {
/*Other Style */
box-sizing:border-box;
}
#deal_three {
/*Other Style */
box-sizing:border-box;
}
Reference
Fiddle Demo
You Border-Width in each Box counts to the width.
Look at the Box-Model: http://www.w3schools.com/css/css_boxmodel.asp
Given what you said in the comments, a possible answer:
HTML at the bottom:
<div id="threeBoxContainer">
<div id="deal_one"></div>
<div id="deal_two"></div>
<div id="deal_three"></div>
</div>
<div id="bigbox"></div>
CSS:
#bigbox {
width: 98%;
height: 300px;
background-color:rgba(0, 95, 160, 1);
border: solid 2px black;
margin-top: 5%;
}
It seems to work for me. I can only get a solid line like you referred to if i leave the height out.
Its because css width only represents the content width. Total width is the combination of padding, margin and border.
Total Width=ContentWidth+Padding+Border+Margin
So giving width to 33% and some margin,padding and border is making it actually greater than 33%. Reduce the width size to achieve the desire results. Around 30 or 31% will be good.
I want to know how to implement a strip of scrolling div boxes in a horizontal line which spans in full width of the browser.
<style>
.block_box{min-height:300px;overflow:hidden;position:absolute;top:400px;}
.block{ float:left; width:200;height:300px;background:grey;margin:10px;padding:20px;}</style>
<div class="block_box">
<div class="block">1</div>
<div class="block">2</div>
<div class="block">3</div>
<div class="block">4</div>
<div class="block">5</div>
<div class="block">6</div>
<div class="block">7</div>
<div class="block">8</div>
</div>
I tried but after 4 or 5 block it is not hiding behind the browser instead it brakes to a new line
In your CSS add display:inline and white-space:nowrap;
.block_box{min-height:300px;overflow:hidden;position:absolute;top:400px;}
.block{ float:left; display:inline; white-space:nowrap; width:200;height:300px;background:grey;margin:10px;padding:20px;}
Here is about white-space. More detailed explanation
Here's a fiddle with a demo of what you want:
http://jsbin.com/anekos/1/edit
New CSS:
.block_box{ height:320px; width:100%; overflow:auto;top:100px;}
.block{display: table-cell; min-width:200px;height:300px;background:grey;margin:10px;padding:20px;
Use percentages for the width of each block so it will fit the width of your browser.
You need to set a width on the div with the class of "block_box"
try applying overflow-x: scroll; css style to your .block_box div.
Try to put an outer div with fixed width. And then use overflow-x:auto property like this
HTML Code :
<div class="outer_div">
<div class="block_box">
<div class="block">1</div>
<div class="block">2</div>
<div class="block">3</div>
<div class="block">4</div>
<div class="block">5</div>
<div class="block">6</div>
<div class="block">7</div>
</div>
</div>
CSS :
.block_box{height:200px;width:800px;overflow:hidden;position:absolute;top:400px;}
.block{ float:left; width:100;height:200px;background:grey;margin:10px;padding:20px;}
.outer_div{ width: 500px; overflow-x:auto;}
Here is the working demo : http://jsfiddle.net/AQr6h/2/
I have the following webpage which works in IE7 but not in IE8;
The HTML:
<div class="content">
<div class="inner_content">
<div class="column">
<div class="widget">
1
</div>
</div>
<div class="column">
<div class="widget">
4
</div>
</div>
<div class="column">
<div class="widget">
7
</div>
</div>
</div>
</div>
<div class="footer">
<div class="inner_footer">
footer
</div>
</div>
The CSS:
.inner_content, .inner_footer
{
width:983px;
margin:auto;
padding:10px;
}
.content
{
background:#FFFFFF;
}
.footer
{
background:#BBBBBB;
}
The problem:
For some reason the footer div goes underneath the content div in IE8 but not in IE7. How do I get it to look the same in IE8 as it looks in IE7? The IE7 look is how I want it to look.
jsFiddle:
http://jsfiddle.net/GgpaP/
You need to contain the floated .columns inside .inner_content.
One way to do this is to add overflow: hidden: http://jsfiddle.net/thirtydot/GgpaP/3/
This will also make it work in modern browsers.
Add clear:both to footer...
DEMO
Also slight modification has been done for container.
Add display:inline-block to your content-class (in css).
I have this html:
<div id='calendarControlPane'>
<div id='calendarControl'>
<div style="border-style:solid; display:inline-block;">
<div style="width:14;height:15;">
</div>
</div>
<div style="border-style:solid; display:inline-block;">
<div style="width:14;height:15;">
</div>
</div>
<div style="border-style:solid; display:inline-block;">
<div style="width:14;height:15;">
</div>
</div>
</div>
</div>
I'm using "display:inline-block" on container divs because I want those divs to fit the size of their contents.
The problem I have is that they are drawn next to each other and need to be drawn below each other.
Well, depending upon your actual final application, using a float can work (see fiddle), though older versions of IE can choke on it:
HTML
<div id="calendarControlPane">
<div id="calendarControl">
<div>
<div></div>
</div>
<div>
<div></div>
</div>
<div>
<div></div>
</div>
</div>
</div>
CSS
#calendarControl > div {
float: left;
clear: left;
border: 1px solid black;
}
#calendarControl > div > div {
width: 14px;
height: 15px;
}
Oldschool fix:
<div id='calendarControlPane'">
<div id='calendarControl'">
<div style="border-style:solid; display:inline-block;">
<div style="width:14;height:15;"></div>
</div><br />
<div style="border-style:solid; display:inline-block;">
<div style="width:14;height:15;"></div>
</div><br />
<div style="border-style:solid; display:inline-block;">
<div style="width:14;height:15;"></div>
</div>
</div>
</div>
Simply add a
<br />
after each div containing the inline-block class.
You're not really asking a question here, and the two bottom lines of your post are a bit hard to understand, but are you sure you don't want display: block instead?
edit: As drublic said, this is the default display value for divs, so you shouldn't need that style at all.