I can't seem to figure out how to align the top of img and copy elements in the promo div. Any thoughts? This doesn't lign up correctly in chrome.
I have looked through a lot of the other questions and cannot seem to figure it out.
At the end of the day i want to be able to have a punch out box at the top left of the div, but I want to make sure that the text overflow does not wrap around the image.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<style type="text/css">
.promo {
float: left;
width: 200px;
background-color: pink;
}
.promo img {
float: left;
width: 48px;
height: 48px;
background-color: orange;
}
.copy {
float: left;
width: 152px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="promo"> <img src="" alt="" />
<p class="copy">This is the content. I have a lot of contentfff this it s a fodis sod sod sfns s ndosn</p>
<div style="clear:both;"></div>
</div>
<div class="promo"> <img src="" alt=""/>
<p class="copy">This is the content. I have a lot of contentfff this it s a fodis sod sod sfns s ndosn</p>
<div style="clear:both;"></div>
</div>
<div class="promo"> <img src="" alt=""/>
<p class="copy">This is the content. I have a lot of contentfff this it s a fodis sod sod sfns s ndosn</p>
<div style="clear:both;"></div>
</div>
</body>
</html>
Is this what you're talking about: http://jsfiddle.net/NuVww/21/ ?
Related
I'm trying to place text on the right side of an image. I need the text to "break" without going beneath the image.
The "break" in the text is the result of the intentionally confined width.
I've made a JSFiddle of what I'm trying to do, but it is broken. Some of the text is to the right of the image, which is correct, and the rest is below the image, which is incorrect.
What can I do to fix this? I'm free to use most any markup or styling; I am not restricted to the div elements in my example.
I have modified the code for you. I hope it helps.
<body style="width: 280px">
<img style="float: left;margin-right:20px;" src="https://v.cdn.vine.co/r/avatars/23E08B47E61293643069115232256_4965b3761ec.5.0.jpg?versionId=bDYNR_haJsXGejeKLJtX1QK8hP4cJUW5" />
<div style="word-wrap:break-word">Jonathan-Paul Montgomery-Benson</div>
</body>
The better way to code it is to avoid inline style. Here is the snippet for this:
body {
width: 280px;
}
img {
float: left;
margin-right: 20px;
}
.break {
word-wrap: break-word;
}
<body>
<img src="https://v.cdn.vine.co/r/avatars/23E08B47E61293643069115232256_4965b3761ec.5.0.jpg?versionId=bDYNR_haJsXGejeKLJtX1QK8hP4cJUW5" />
<div class="break">Jonathan-Paul Montgomery-Benson</div>
</body>
I have done some changes in the markup. Hope this will help.
.block {
display: flex;
width: 280px;
}
img {
max-width: 100%;
}
<body>
<div class="block"><img src="https://v.cdn.vine.co/r/avatars/23E08B47E61293643069115232256_4965b3761ec.5.0.jpg?versionId=bDYNR_haJsXGejeKLJtX1QK8hP4cJUW5" />
<div>Jonathan-Paul Montgomery-Benson</div>
</div>
</body>
I have done it it like this.Hope this helps.
.class-txt{
display: inline;
word-wrap: break-word;
width: 60%;
position: relative;
float: left;
}
.img-class{
width : 40%;
float:left;
}
<body style="width: 280px">
<img class='img-class' src="https://v.cdn.vine.co/r/avatars/23E08B47E61293643069115232256_4965b3761ec.5.0.jpg?versionId=bDYNR_haJsXGejeKLJtX1QK8hP4cJUW5" />
<div class="class-txt" style="display:inline; word-wrap: break-word;">Jonathan-Paul Montgomery-Bensononathan-Paul Montgomery-Benson onathan-Paul Montgomery-Benson onathan-Paul Montgomery-Benson onathan-Paul Montgomery-Benson onathan-Paul Montgomery-Benson</div>
</body>
Try to use display:flex; css style property
<body style="width: 280px">
<img style="float: left;margin-right:20px;" src="https://v.cdn.vine.co/r/avatars/23E08B47E61293643069115232256_4965b3761ec.5.0.jpg?versionId=bDYNR_haJsXGejeKLJtX1QK8hP4cJUW5" />
<div style="display:flex;">Jonathan-Paul Montgomery-Benson Jonathan-Paul Montgomery-Benson </div>
</body>
<body>
<div style="display:inline-flex; word-wrap: break-word;">
<img style="float: left;" src="https://v.cdn.vine.co/r/avatars /23E08B47E61293643069115232256_4965b3761ec.5.0.jpg?versionId=bDYNR_haJsXGejeKLJtX1QK8hP4cJUW5" />
<div>Jonathan-Paul Montgomery-Benson</div>
</div>
</body>
You can use the following markup to achieve this.
.row{width:280px;}
.row:after{clear:both; content:""; display:block;}
.img-col{width:40%; float:left;}
.img-col img{width:100%; height:auto;}
.des-col{width:57%; float:right;}
<div class="row">
<div class="img-col">
<img src="https://v.cdn.vine.co/r/avatars/23E08B47E61293643069115232256_4965b3761ec.5.0.jpg?versionId=bDYNR_haJsXGejeKLJtX1QK8hP4cJUW5" />
</div>
<div class="des-col">Jonathan-Paul Montgomery-Benson</div>
</div>
You can set the ".img-col" width according to your design.
(First: I have already tried all options involving margin, border, and so on.)
Link to problematic page.
Link to similarly constructed, non-problematic page.
This is made up of several divs and smaller images. The problem can be seen in the inventory boxen - there is a gap between the two rows.
Here is the HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<link rel='stylesheet' type='text/css' href='../style.css'>
<title>Open the door</title>
</head>
<body>
<div class='puzzle'>
<img src='images/lm1top.png' alt='img'>
</div>
<br>
<div class='puzzle'>
<!-- THE PROBLEM IS HERE! -->
<img src='images/lm1left_top.png' alt='img'>
<img src='images/lm1key.png' id='key' alt='img'>
<img src='images/lm1_x.png' alt='img'>
<img src='images/lm1_1.png' id='num' alt='img'>
<img src='images/lm1right_top.png' alt='img'>
<!-- END PROBLEM -->
</div>
<br>
<div class='puzzle'>
<img src='images/lm1mid_top.png' alt='img'>
</div>
<br>
<div class='puzzle'>
<img src='images/lm1door.png' id='door' alt='img'>
</div>
<br>
<div class='puzzle'>
<img src='images/lm1body.png' alt='img'>
</div>
<br>
</body>
</html>
Here is the stylesheet:
body
{
background-color: black;
}
div.puzzle
{
position: relative;
float: left;
left: 50%;
}
div.puzzle img
{
position: relative;
float: left;
margin: 0px;
left: -50%
}
p
{
color: white;
text-align: center;
}
div.hint p
{
font-style: italic;
font-size: 75%;
}
br
{
clear: both;
}
It is notable that this happened below the only row with more than one image. The images in the problematic row are all the same height, and the combined width of the images is the same as the rows above and below. I checked several times.
I did the same thing on another page, but with no problem at all:
This page is broken into about as many pieces as the other, and it is broken at more than one place. But, it looks just fine, while the other has this annoying gap.
Any ideas as to the cause would be greatly appreciated!
Remove all the <br> elements that are between the <div class="puzzle"> elements. Then add
clear: left
to the .puzzle selector.
Below is my code for a simple page. I'm trying to have (A) a banner on the top which consists of a logo, a header to its right and then a "sign in/register" link, (B) below all this then I will have the main text of the site.
I would like a large gap between the main text and banner at the top. So I divide the page up with divs. But when I apply a "margin-top" to #main to keep the banner at a certain distance, EVERYTHING, that is, the main text and everything in my banner all move down the page. Same thing happens if I apply a "margin-bottom" to the header element.
I'm kind of new to CSS and HTML but I though I had the hang of it until this. I've scratched my head for ages about this but I can't seem to understand positioning here at all!
<!DOCTYPE html>
<html lang="en">
<head>
<link href="style.css" rel="stylesheet" type="text/css"/>
<meta charset="utf-8"/>
<title>My Page</title>
</head>
<body>
<header id="masthead" role="banner">
<img src="jep.jpeg" alt="My Page">
<h2>Welcome!</h2>
<p>Sign in Register</p>
</header>
<div id="main" role="main">
<!--main text here -->
</div>
</body>
</html>
Here is the CSS code:
#masthead {
position: relative;
}
#masthead img {
position: absolute;
}
#masthead h2 {
position: absolute;
left: 150px;
}
#masthead p {
position: absolute;
right: 10px;
}
#main {
margin-top: 40px;
}
The problem is that all of the absolute positioning removes the elements from the document flow. That means your header has a height of 0px, but everything is still positioned relative to it.
Just give your masthead a height.
JSFiddle
You just need to wrap your elements in their own containers so you can position them a little bit better. You will probably want to define some heights in this also. Including a height on #masthead
Assuming you need a responsive design:
<header id="masthead" role="banner">
<section class="logo">
<img src="jep.jpeg" alt="My Page">
</section>
<section class="title">
<h2>Journal of Electronic Publishing</h2>
</section>
<section class="sign-in">
Sign in Register
</section>
</header>
.logo {
width: 30%;
float: left;
margin-right: 5%;
box-sizing: border-box;
}
.title {
width: 30%;
float: left;
margin-right: 5%;
box-sizing: border-box;
}
.sign-in {
width: 30%;
float: left;
margin-right: 0;
box-sizing: border-box;
}
Note that the total 100% is assuming you include the margins in that calculation. So, 30+30 = 60 + 5 + 5 = 70 + 30 = 100%
Edit: Now that I can see your CSS, your specific issue is the use of position:absolute;. Removing these should get you along the correct path.
I suggest using a table layout. Using 1-row tables for styling is a bit frowned upon by some, but this seems to work:
HTML:
<body>
<header id="masthead" role="banner">
<table>
<tr>
<td><img src="jep.jpeg" alt="My Page"></td>
<td><h2>Welcome!</h2></td>
<td><p>Sign in Register</p></td>
</tr>
</table>
</header>
<div id="main" role="main">
<p>Testing</p>
</div>
</body>
</html>
and CSS:
#masthead {
width: 100%;
}
#masthead table {
width: 100%;
}
#main {
margin-top: 40px;
}
EDIT: Using divs.
This is a bit messy, but it works. It's been a while since I've used div for positioning like this.
HTML:
<body>
<header>
<div class="col">
<div class="content">
<img src="jep.jpeg" alt="My Page">
</div>
<div class="content">
<h2>Welcome!</h2>
</div>
<div class="content">
<p>Sign in Register</p>
</div>
</div>
</header>
<div id="main" role="main">
Testing
</div>
</body>
</html>
CSS:
header {
width: 100%;
}
.col {
height: 100px;
position: relative;
}
.content {
float: left;
width: 33.3%;
}
#main {
margin-top: 50px;
}
so guys, if u test the code below, u can see that everything is alright, except if u size down the window, so the flash menu ( red div ) is going out of the page to the right.
well if the window is smaller then 900px, there is a HORIZONTAL scrollpane, so far so good, but it just scrolls the content of the page!
I want the upper part also to scroll, but only horizontal, cuz I want them to be fixed (stay on top of the site always)...
any suggestions? I've tried so many things from google, but no one of them was the right one 4 me...
thx & g.r. ace
html:
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Titel</title>
<link href="main.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="div_page" align="center">
// page content goes here
</div>
<div id="div_menu">
<img src="img/logo.png" alt="<Logo>" style="position:absolute; top:0px; left:20px; width:225px; height:150px;">
<div id="div_flash"></div>
</div>
</body>
</html>
css:
#charset "utf-8";
body {
padding:0px;
margin:0px;
}
#div_menu {
position:fixed;
top:0px; right:0px; left:0px;
width:100%; height:40px;
min-width:800px;
overflow:visible;
background-image:url(img/menu.png);
background-position:top left;
background-attachment:fixed;
background-repeat:no-repeat;
background-size:100% 40px;
background-color:#333;
}
#div_flash {
position:absolute;
top:0px; left:250px;
width:500px; height:150px;
background-color:#F00;
}
#div_page {
position:absolute;
top:40px; right:0px;left:0px;
min-width:800px; min-height:500px;
}
As it seems to me, pure CSS can't solve this issue.
But adding a few lines of JQuery may help:
<script type="text/javascript">
$(window).scroll(function() {
$('#div_menu').css('top', $(this).scrollTop() + "px");
});
</script>
CSS position of #div_menu should be changed to absolute.
UPD:
In pure JS it would be:
<script type="text/javascript">
var div_menu = document.getElementById('div_menu');
window.onscroll = function (e) {
if (div_menu)
div_menu.style.top = window.pageYOffset + 'px';
}
</script>
There is a CSS-only solution possible with position:sticky , top:0
See this Fiddle : Link
$headerDiv = $('.header-wrapper');
$rowDiv = $('.row-wrapper');
$rowDiv.scroll(function(e) {
$headerDiv.css({
left: -$rowDiv[0].scrollLeft + 'px'
});
});
It will be helpful.
Hie, that is because you have made the widht of the content boxes/divs fixed; If you want to make them adjust as per the window size, then use percentages for width like: width: 60%; This is infact a responsive design. But still if you want your page header only to be scrolled, then make sure that you bound the content required in a div tag, whose width should be determined by page's width and apply overflow property for that tag; if you want only in horizontal direction, then use overflow-x:scroll and overflow-y hidden(since if one direction is specfied, other will be visible but with disabled mode), which is as shown:
<div style="width:60%;overflow-x:scroll; overflow-y:hidden;">
//your conetnt//including divs
</div>
The thing here is, whenever the width of the content in a div/any tag is more than the width of its outer div, then overflow happens; in this case, you can use overflow property, where you can set properties like : hidden, show, scroll, auto etc..
But try to avoid this, because responsive design is the next-generation markup language technique, where the widths(size) should be dependent on the browser size... :)
Happy coding.. :)
$("#body").scroll(function() {
scrolled = $("#body").scrollLeft();
$("#header").scrollLeft(scrolled);
});
.header {
background-color: red;
position: absolute;
top: 10px;
left: 8px;
width: 120px;
overflow: hidden;
}
.body {
overflow: scroll;
margin-top: 51px;
height: 100px;
width: 120px;
}
.col {
display: flex;
flex-direction: column;
}
.row {
display: flex;
flex-direction: row;
}
.cell1 {
border-top: 1px solid red;
border-right: 1px solid red;
background: #DDD;
height: 40px;
min-height: 40px;
width: 50px;
min-width: 50px;
}
.cellh {
border-top: 1px solid red;
border-right: 1px solid red;
background: yellow;
height: 40px;
width: 50px;
min-width: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Here a very simple solution
Uses Flex for the table formatting -->
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="wrap">
<div id="main">
<div id="header" class="row header">
<div class="cellh">1</div>
<div class="cellh">2</div>
<div class="cellh">3</div>
<div class="cellh ">4</div>
<div class="cellh">5</div>
</div>
<div id="body" class="col body">
<div class="row">
<div class="cell1"></div>
<div class="cell1 "></div>
<div class="cell1 "></div>
<div class="cell1 "></div>
<div class="cell1 "></div>
</div>
<div class="row">
<div class="cell1"></div>
<div class="cell1 "></div>
<div class="cell1 "></div>
<div class="cell1 "></div>
<div class="cell1 "></div>
</div>
<div class="row">
<div class="cell1"></div>
<div class="cell1 "></div>
<div class="cell1 "></div>
<div class="cell1 "></div>
<div class="cell1 "></div>
</div>
<div class="row">
<div class="cell1"></div>
<div class="cell1 "></div>
<div class="cell1 "></div>
<div class="cell1 "></div>
<div class="cell1 "></div>
</div>
</div>
</div>
</div>
</body>
</html>
I'm trying to accomplish some atypical div behavior, so I'm not sure if this is possible.
I have three divs which sit next to one another horizontally: A, B, and C (from left to right). When the browser is resized, or if a user's browser window is too small, I would like div B to drop below div A, rather than the typical behavior where div C drops below div A.
The typical behavior is demonstrated by this code:
<!DOCTYPE HTML>
<html>
<head>
<title>
Title
</title>
<style type="text/css">
.box {
display: inline-block;
margin: 4px;
background: #ccc;
width: 200px;
}
</style>
</head>
<body>
<div class="box" style="height: 200px;">div a</div>
<div class="box" style="height: 300px;">div b</div>
<div class="box" style="height: 500px;">div c</div>
</body>
</html>
http://jsfiddle.net/P5xLx/
When I place divs A and B in one table-cell and div C in another, I can get div B to drop below div A. The only issue with this is that the left table-cell which contains the two divs does not collapse to the width of the two divs, and so there is still a gap between divs A and B and div C. This code shows that behavior:
<!DOCTYPE HTML>
<html>
<head>
<title>
Title
</title>
<style type="text/css">
.box {
display: inline-block;
margin: 4px;
background: #ccc;
width: 200px;
}
</style>
</head>
<body>
<div style="display: table;">
<div style="display: table-row;">
<div style="display: table-cell;">
<div class="box" style="height: 200px;">div a</div>
<div class="box" style="height: 300px;">div b</div>
</div>
<div style="display: table-cell;">
<div class="box" style="height: 500px;">div c</div>
</div>
</div>
</div>
</body>
</html>
http://jsfiddle.net/cncgs/
Is there a way to make the left table-cell take the width of the two stacked divs, or maybe there is some other way to accomplish this which doesn't involve the table at all. Basically, I just need to find a way for div C to sit next to A and B once B drops below A. I'm trying to find a css solution and avoid using a javascript solution which, for example, calculates the width of A and B and compares it to the width of the left table-cell.
EDIT In the examples above, the widths are 200px, but in the actual implementation, that 200px is a variable width, depending on user-submitted content. I'm looking for a solution which can deal with variable-width columns.
How does this suit? Using media queries to change the width of the container for the first two divs:
<!DOCTYPE HTML>
<html>
<head>
<title>Title</title>
<style type="text/css">
.box {
display: block;
margin: 4px;
background: #ccc;
width: 200px;
float:left;
}
.leftCol{width:416px; float:left}
#media screen and (max-width: 1000px){
.leftCol{width:208px;}
}
</style>
</head>
<body>
<div class="leftCol">
<div class="box" style="height: 200px;">div a</div>
<div class="box" style="height: 300px;">div b</div>
</div>
<div class="box" style="height: 500px;">div c</div>
</body>
</html>
Obviously the widths will vary depending on what you’re building.
This might be close to what you want
<!DOCTYPE HTML>
<html>
<head>
<title>
Title
</title>
<style type="text/css">
.box {
display: inline-block;
margin: 4px;
background: #ccc;
width: 200px;
}
.left { float: left; }
.right {float: right;}
.wrap {max-width: 625px; overflow:auto;}
</style>
</head>
<body>
<div class="wrap">
<div class="box left" style="height: 200px;">div a</div>
<div class="box right" style="height: 500px;">div c</div>
<div class="box" style="height: 300px;">div b</div>
</div>
</body>
</html>
http://jsfiddle.net/MR6fj/
The only problem is div c stays all the way to the right of the wrap div all the time. This might be closer to what you wanted though.