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!
Related
How to prevent padding-right from the right column when window resize if use flex with column wrap?
Problem
body {
background: #f9f9f9;
color: #465665;
}
a {
color: #5b7083;
transition: all .25s ease-in-out;
}
/* The title */
.title {
font-weight: 700;
}
/* The description */
.desc {
font-size: 1em;
font-style: italic;
font-family: Georgia, serif;
}
/* Text-centering */
.title,
.desc,
.intro {
text-align: center;
}
/* Intro section */
.intro {
margin: 1.75em 0 .75em;
border-bottom: 3px double rgba(0, 0, 0, 0.05);
margin-bottom: 1.75em;
}
.intro a {
opacity: .7;
}
.intro a:hover {
opacity: 1;
}
.intro h3 {
font-size: .825em;
font-weight: 700;
text-transform: uppercase;
display: inline-block;
margin: .25em .75em .75em;
}
.intro h3 a {
font-weight: 400;
}
/* Masonry grid */
.masonry {
transition: all .5s ease-in-out;
column-gap: 30px;
column-fill: initial;
}
/* Masonry item */
.masonry .brick {
margin-bottom: 30px;
display: inline-block; /* Fix the misalignment of items */
vertical-align: top; /* Keep the item on the very top */
}
/* Masonry image effects */
.masonry .brick img {
transition: all .5s ease-in-out;
backface-visibility: hidden; /* Remove Image flickering on hover */
}
.masonry .brick:hover img {
opacity: .75;
}
/* Bordered masonry */
.masonry.bordered {
column-rule: 1px solid #eee;
column-gap: 50px;
}
.masonry.bordered .brick {
padding-bottom: 25px;
margin-bottom: 25px;
border-bottom: 1px solid #eee;
}
/* Gutterless masonry */
.masonry.gutterless {
column-gap: 0;
}
.masonry.gutterless .brick {
margin-bottom: 0;
}
/* Masonry on tablets */
#media only screen and (min-width: 768px) and (max-width: 1023px) {
.masonry {
column-count: 2;
}
}
/* Masonry on big screens */
#media only screen and (min-width: 1024px) {
.desc {
font-size: 1.25em;
}
.intro {
letter-spacing: 1px;
}
.masonry {
column-count: 2;
}
}
.masonry {
border: 1px solid black;
}
.container {
border: 1px solid black;
}
<div class="container">
<div class="wrapper">
<div class="masonry">
<div class="brick">
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 class="brick">
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</div>
<div class="brick">
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 class="brick">
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 class="brick">
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="brick">
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="brick">
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="brick">
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="brick">
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>
https://jsfiddle.net/jsman82/ve4Ldhc8/
This will work,
add this css to .brick class:
.masonry .brick{
margin-bottom: 30px;
display: inline-block;
vertical-align: top;
text-align: justify;// add this line
}
The text-justify property specifies the justification method of text when text-align is set to "justify".
This is not padding that makes extra space at the right side. It is because the long paragraph will automatically split into a new line when text grows.
If you dont want to break the word to use the available space, you can use text-align: justify; to .masonry .brick. This will not break the word, instead it uses the space in between
body {
background: #f9f9f9;
color: #465665;
}
a {
color: #5b7083;
transition: all .25s ease-in-out;
}
/* The title */
.title {
font-weight: 700;
}
/* The description */
.desc {
font-size: 1em;
font-style: italic;
font-family: Georgia, serif;
}
/* Text-centering */
.title,
.desc,
.intro {
text-align: center;
}
/* Intro section */
.intro {
margin: 1.75em 0 .75em;
border-bottom: 3px double rgba(0, 0, 0, 0.05);
margin-bottom: 1.75em;
}
.intro a {
opacity: .7;
}
.intro a:hover {
opacity: 1;
}
.intro h3 {
font-size: .825em;
font-weight: 700;
text-transform: uppercase;
display: inline-block;
margin: .25em .75em .75em;
}
.intro h3 a {
font-weight: 400;
}
/* Masonry grid */
.masonry {
transition: all .5s ease-in-out;
column-gap: 30px;
column-fill: initial;
}
/* Masonry item */
.masonry .brick {
margin-bottom: 30px;
display: inline-block;
/* Fix the misalignment of items */
vertical-align: top;
/* Keep the item on the very top */
text-align: justify;
}
/* Masonry image effects */
.masonry .brick img {
transition: all .5s ease-in-out;
backface-visibility: hidden;
/* Remove Image flickering on hover */
}
.masonry .brick:hover img {
opacity: .75;
}
/* Bordered masonry */
.masonry.bordered {
column-rule: 1px solid #eee;
column-gap: 50px;
}
.masonry.bordered .brick {
padding-bottom: 25px;
margin-bottom: 25px;
border-bottom: 1px solid #eee;
}
/* Gutterless masonry */
.masonry.gutterless {
column-gap: 0;
}
.masonry.gutterless .brick {
margin-bottom: 0;
}
/* Masonry on tablets */
#media only screen and (min-width: 768px) and (max-width: 1023px) {
.masonry {
column-count: 2;
}
}
/* Masonry on big screens */
#media only screen and (min-width: 1024px) {
.desc {
font-size: 1.25em;
}
.intro {
letter-spacing: 1px;
}
.masonry {
column-count: 2;
}
}
.masonry {
border: 1px solid black;
}
.container {
border: 1px solid black;
}
<div class="container">
<div class="wrapper">
<div class="masonry">
<div class="brick">
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 class="brick">
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</div>
<div class="brick">
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 class="brick">
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 class="brick">
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="brick">
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="brick">
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="brick">
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="brick">
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>
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
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 / -->
I've managed to align side by side the DIV containing the image, and the DIV containing the text, side by side, by applying float:left to the image DIV.
But when I Include these two DIVs in a parent DIV, and duplicate the parent and try to align the parents side by side by applying float:left to the first parent, it doesn't work.
Here's my code:
<div style="width:350px;min-height: 200px; float:left;">
<div style="float:left;"><img src="image.jpg" width=120px height=120px style="border: 1px solid black;padding:1px;"></div>
<div style="font-size:15pt;color:red;letter-spacing:-.04em;padding-top:2px;padding-left:135px;">Title</div>
<div style="font-size:11pt;color:black;letter-spacing:-.02em;margin-top:4px;padding-left:135px;">Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text.</div>
</div>
<div style="width:350px;min-height: 200px;">
<div style="float:left;"><img src="image.jpg" width=120px height=120px style="border: 1px solid black;padding:1px;"></div>
<div style="font-size:15pt;color:red;letter-spacing:-.04em;padding-top:2px;padding-left:135px;">Title</div>
<div style="font-size:11pt;color:black;letter-spacing:-.02em;margin-top:4px;padding-left:135px;">Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text.</div>
</div>
and fiddle.
I also wonder whether the rest of the code is best practice, such as padding-left:135px - would it be better to use relative padding from the image, rather than the parent div? if so, what's the easiest way to change that?
You have the float:left outside of the style attribute, try moving that inside the speech marks and applying float: left to both parent divs.
Updated Fiddle
You can simply change your code to the below, giving each div a display:inline-block; then as long as your browser window is greater than the sum of the two div widths, they will display inline, no need for floats:
<div style="width:350px;min-height: 200px;display:inline-block;">
<div style="float:left;">
<img src="image.jpg" width=120px height=120px style="border: 1px solid black;padding:1px;">
</div>
<div style="font-size:15pt;color:red;letter-spacing:-.04em;padding-top:2px;padding-left:135px;">Title</div>
<div style="font-size:11pt;color:black;letter-spacing:-.02em;margin-top:4px;padding-left:135px;"/>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text.</div>
</div>
<div style="width:350px;min-height: 200px;display:inline-block;">
<div style="float:left;">
<img src="image.jpg" width=120px height=120px style="border: 1px solid black;padding:1px;"/>
</div>
<div style="font-size:15pt;color:red;letter-spacing:-.04em;padding-top:2px;padding-left:135px;">Title</div>
<div style="font-size:11pt;color:black;letter-spacing:-.02em;margin-top:4px;padding-left:135px;">Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text.</div>
</div>
That said I would strongly recommend you separate your CSS from your HTML in order to make a clear distinction between content and presentation and capture the clear benefits that offers.
You had one of your float: left attributes outside of the style tag. Also, you should use CSS classes instead of putting all of your CSS styles inline. It makes your code much neater and prevents a lot of duplicated styling. Here is an updated Fiddle.
HTML
<div class="parent">
<div class="image-wrap">
<img class="image" src="image.jpg" width=120px height=120px />
</div>
<div class="title">
Title
</div>
<div class="text">
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text.
</div>
</div>
<div class="parent">
<div class="image-wrap">
<img class="image" src="image.jpg" width=120px height=120px />
</div>
<div class="title">
Title
</div>
<div class="text">
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text.
</div>
</div>
CSS
.parent {
width:350px;
min-height: 200px;
float:left;
}
.title {
font-size:15pt;
color:red;
letter-spacing:-.04em;
padding-top:2px;
padding-left:135px;
}
.text {
font-size:11pt;
color:black;
letter-spacing:-.02em;
margin-top:4px;
padding-left:135px;
}
.image-wrap {
float: left;
}
.image {
border: 1px solid black;
padding:1px;
}
I have one container div, which contains 3 divs inside it.
When i write border:1px solid red for container div, border is shown only on top of these 3 child divs, but not around them.
Below is css code.
#cont {
width:800px;
margin-right:auto;
margin-left:auto;
border:1px dashed red;
padding:2px;
}
#third, #second, #first {
width:260px;
float:left;
margin:2px;
}
Html code:
![<div id="cont">
<div id="third"><p>A demo text </p></br>
<p>A demo text </p></br>
<p>A demo text </p></br>
<p>A demo text </p></br>
</div>
<div id="second"><p>A demo text </p></br>
<p>A demo text </p></br>
<p>A demo text </p></br>
<p>A demo text </p></br>
</div>
<div id="third"><p>A demo text </p></br>
<p>A demo text </p></br>
<p>A demo text </p></br>
<p>A demo text </p></br>
</div>
</div>][1]
add overflow:hidden;
#cont {width:800px;margin-right:auto;margin-left:auto; border:1px dashed red;padding:2px; overflow:hidden;}
<div style="clear:both;float:none;"></div> well solve your problem. added it under the div's
add overflow:hidden to the #cont element