eftMy html:
<div id="content_living" >
<div id="leftnav">
//only text href
</div>
<div id="show_pics">
//pics: 1, 2, 3 4, - all href with img
</div>
</div>
My CSS:
#content_living {
}
#leftnav{
float:left;
width:200px;
padding-left: 20px;
padding-top: 30px;
background: none repeat scroll 0px 0px rgba(255, 255, 255, 0.8);
}
#show_pics {
padding-top:15px;
padding-bottom: 20px;
overflow: hidden;
padding-left: 10px;
width: auto;
}
What I get:
href1 | pic1 pic2 pic3
href2 | pic4 pic5 pic6
| pic7 pic8 pic9
| pic10 pic11 pic12
But what I want:
href1 | pic1 pic2 pic3
href2 | pic4 pic5 pic6
| pic7 pic8 pic9 pic10
| pic11 pic12 ...
What do I do wrong?
add display:inline to #show_pics
jsfiddle
You can try floating your navigation to the left and then just add a padding to your content div. Should suffice as a dirty solution for your problem.
.left-nav {
float:left;
width:90px;
background:darkgray;
}
.main-content {
padding-left:100px;
}
JSFIDDLE
http://jsfiddle.net/QWhSn/
You're better off putting floated element inside the same parent as the content that is supposed to wrap around it. So remove the div around the pics.
I knocked this up so you could see http://jsfiddle.net/FE3Wj/
That's only my solution:
Give #content_living a width. Than add a float: right; command to the #show_pics id and delete the float: left command from #left_nav. With the width in the #content_living you can control the space between the two div's inside. Hope it works.
Related
I put together this fiddle
What I have is 2 divs and then one of them has 2 more divs in it. What I am trying to do it properly position label and span within second div
<div id="someotherdiv">
</div>
<div class="reportuserinfo">
<div class="leftdivinfo">
<label>Teacher:</label><span>Teacher Name</span><br/>
<label>District:</label><span>District Name</span><br/>
<label>School:</label><span>School Name</span>
</div>
<div class="rightdivinfo">
<label>Class:</label><span>Class Name</span><br/>
<label>Content:</label><span id="currcontent">Content</span><br/>
<label>Unit:</label><span id="currunit"></span>
</div>
</div>
If you look in fiddle right now label is floating to the right and so is span but they look strange, what I am attempting to accomplish is something like this on both sides of second div:
Teacher: Teacher Name
District: District Name
School: School Name
The way they look right now is
Teacher: Teacher Name
District: District Name
School: School Name
Thanks for your help.
I just added width:30%; in your css class ".reportuserinfo label" and it fixed the issue (fiddle). You need to define width in order to fix the text alignment issue. You can adjust space margins as per your requirements.
Here is how your code looks like to me now :-
.reportuserinfo label {
float: left;;
margin-right: 30px;
font-weight: bold;
text-align: right;
width:30%;
}
You should define a min-width style in your css apart from width:40% to ensure that the text you are trying to write does not scroll if browser width is decreased
.leftdivinfo {
float:left;
min-width: 200px;
width:40%;
background: yellow;
padding-left: 30px;
padding-right: 30px;
}
Have you tried using tables? You could enclose this information in a table, then right-align the text in the left column:
table {
border: none;
}
td:first-child {
text-align: right;
}
td {
padding: 5px;
}
<table>
<tr>
<td>Class Teacher:</td>
<td>John Smith</td>
</tr>
<tr>
<td>District:</td>
<td>Smithsville</td>
</tr>
<tr>
<td>School:</td>
<td>Smith's High School</td>
</tr>
</table>
Try setting width to auto and adding display:inline-block.
.leftdivinfo {
float:left;
width: auto;
background: yellow;
padding-left: 10px;
padding-right: 10px;
display:inline-block
}
Tables might be a better way to make this.
EDIT:
I see you want the colons aligned, add min-width:70px; to the label class.
ETA: Thanks for all the help, everyone! These all worked beautifully. Thanks so much for your time!
I'm coding a newsletter (live preview here and my goal for it here) and am trying to get the navigation buttons ('Join Meet Learn Support') to sit about halfway down the logo. When I try top-margin in the navButtons class I'm not seeing any success. I suspect it's a display issue, but I'm not sure --- changing from inline to inline-block didn't really help.
<!DOCTYPE html>
<html>
<head>
<title>The Leaflet</title>
<style>
div
{
display: inline;
}
a
{
text-decoration: none;
}
p
{
text-align:left;
margin-left: 130px;
margin-right: 130px;
max-width: 600px;
}
#logo /* This sets the width for the New Leaf logo at the top. This should not change.*/
{
position:relative;
}
#navButtons
{
position:relative;
right:-240px;
}
#announcementImage
{
margin-left: 120px;
margin-right: 120px;
}
a.joinButton
{
margin-left:40%;
color:white;
background-color: #f7853e;
font-size: 30px;
}
a.navButton
{
color:#494541;
font-size: 22px;
}
</style>
</head>
<body>
<div id="logo"> <! --- Sets up the logo --->
<img src ="images/NLNewsletterLogo.png">
</div>
<div id="nav buttons"> <! --- Navigation Bar--->
<a class = "joinButton" href="url">Join</a>
<a class = "navButton" href="url"> Meet </a>
<a class = "navButton" href="url">Learn </a>
<a class = "navButton" href="url">Support </a>
</div>
<br>
<br>
<br>
<br>
<br>
<div id ="announcementImage"><! --- Lead Image-->
<img src="images/announcementGraphic.png">
</div>
<div id = "announcementText">
<p>Thrive Week is in full swing here at the Leaf. So far, we've had Sharon Perry, head of the State
College Area School District Career Center, help participants identify which of 34 traits,
including the special quality of woo, are strengths they employ in various settings so they can
work smarter. Then Anna Gokieli, owner of Tru Meditation and Yoga, got us staying present and
peaceful even in situations that often trigger stress. Will Snyder brought it home last night by
showing how making art and making money don't have to conflict.
Have a comment on a workshop you've attended or a session you'd like to see in our remaining
Design and Launch weeks? Galen would love to hear from you!</p>
</div>
</body>
Try this
#logo {
display: inline-block;
vertical-align: middle;
}
#nav {
display: inline-block;
vertical-align: middle;
width: 100%;
}
I think what your looking for is:
#logo {
vertical-align: middle;
}
Try adding bottom of something like 60px to div with id nav buttons.
Since this element is position: relative, it's placement can be controlled with left, right, top, bottom, like so:
#nav#buttons {
bottom: 50px;
}
Floating the logo left, and adding margin to the #nav will do the trick.
#logo { float: left; }
#nav {margin-top: 80px; width: 100%; display: inline-block; }
h1.title { clear: left; }
You're almost there. Inline-Block is what I'd use with absolute positioned nav, but you have a generic div {position:inline;} that applies to everything on the page inside of a div. You should be more specific for your logo and nav and just get rid of the generic styling by giving each a class like <div class="WHATEVER"> so you can target the div you want to work on.
Then try this:
#logo {
width: 240px;
display: inline-block;
#nav buttons {
margin: 0px 0px 0px 80px;
display: inline-block;
position: absolute;
top: 80px;}
i'm trying to wrap my paragraph's text around the image's div, i've tried everithing but can't figured out why is not working, my head is literally floating left and right by now...
here is the css:
/* CSS Document Sidebar */
#sidebar {
background-color: #FFF;
width: 330px;
height: auto;
float: left;
}
#news {
width: 300px;
height: 200px;
margin: 15px;
position: relative;
border: solid 1px;
}
.newsImage {
width: 120px;
height: 120px;
position: absolute;
float: left;
bottom: 0px;
margin: 5px;
padding: 10px;
border: solid 1px;
}
.newsImage img {
width: 100%;
height: 100%;
}
#news p.title {
font-size: 14px;
color: #333;
margin: 5px;
}
#news p.content {
font-size: 12px;
word-wrap:break-word;
margin: 5px;
color: #333;
}
/* CSS Document Sidebar - END */
here the divs
echo '<div id="news">';
echo '<p class="title">'.$row_Display['PageName'].'</p>';
echo '<p class="content">'.$row_Display['PageContent'].'</p>';
echo '<div class="newsImage">';
echo '<img src="'.trim($row_Display['Image'], '/').'" />';
echo '</div>';
echo '</div>';
UPDATE:
Add here an example of my structure (i don't have the reputation for upload an image):
-----------------------
| <p>[TITLE] |
| |
| <p>[CONTENT] |
|-----------| content |
| IMAGE div | wrap |
| | around |
-----------------------
SOLUTION:
The problem was the position:absolute like Martijn said, but with some tests i manage to reach my own solution. For those who are still stuck on this issue you just need to:
Delete the position:absolute and position:relative from the CSS
Set every paragraph <p> to <div> with the same classes or id
Now put in HTML code the <div 'title'> on top and set float:left
Create under the previous an emtpy <div class='clear'></div> and set the CSS .clear{clear:both;}
Now the image's div goes INTO the content/text's div, make sure to put the <img src='' /> just before the text so the image can float free.
And then you can set the CSS with .img{float:right;} and .content/text{float:left;}. Doing this the text will wrap perfectly around the image
For those who voted negative i'm sry if my previous post wasn't that clear and complete and excuse me for my english.
Hope this can help someone.
Regards.
Try to avoid position absolute. This only complicates things in the long run, maintanance-wise.
Then, what you first need to do is create a more table like structure. Create two columns (your title+content and the image) and proceed from there:
-----------------------
| [TITLE] | IMAGE |
|------------| IMAGE |
| [CONTENT] | IMAGE |
-----------------------
The thing you're looking for is display: inline-block;, this allows multiple elements to be on one line (inline) and still give it dimentions (block). This does require the element to touch eachother, no spaces between them (see in the example provided below).
I've made a simple example for you
I'm not a float fan. IMO they're always complicating stuff more than they fix.
I would like to create two divs, one inside the other with equal padding on all sides of the child. Like so
<div>
<div>Foo</div>
</div>
So that the result looks like
----------------------------
| |
| |--------------------| |
| | | | <---- There is 1em padding on the inner
| | Foo | | container too
| | | |
| | | |
| |--------------------| |
| | <---- This is the window height,
---------------------------- the padding is 1em on all sides;
How do I do this in CSS?
Right now I am stuck on this layout, missing the bottom padding
With this code
<div class="more-padded full-height blue-green fixed">
<div class="more-padded full-height light-tan more-rounded light-border">Foo</div>
</div>
and style
.more-padded {
padding: 1em;
}
.full-height {
height: 100%;
}
.blue-green {
background-color: rgba(153, 204, 204, 1);
}
.light-tan {
background-color: rgba(239, 235, 214, 1);
}
.more-rounded {
-moz-border-radius: 1em;
-webkit-border-radius: 1em;
border-radius: 1em;
}
You can use box-sizing:border-box; so that the width and height properties include the padding and border
HTML
<div id="parent">
<div id="child">Foo</div>
</div>
CSS
* {
margin:0;
padding:0;
}
html, body {
height:100%;
}
#parent {
box-sizing:border-box;
height:100%;
padding:1em;
background:hotpink;
}
#child {
height:100%;
background:dodgerblue;
}
Demo
Hi for equal padding use the following code.
Live demo is on http://jsfiddle.net/adarshkr/fqm83gms/5/
html
<div class="outer">
<div class="inner">
<p>Equal padding adarsh</p>
</div>
</div>
css
body{
background:#ddd
}
.outer{
background:#eee;
padding:20px
}
.inner{
background:#000;
padding:20px;
color:#fff
}
.inner a{
color:#fff;
text-decoration:none
}
Ok, now that I am on an actual computer:
I think you want this: (Js Fiddle For Reference)
body,html{
height:100%;width:100%;
}
body{
padding:1em;
}
body >div{
border:1px solid black;
}
ISSUE
| <---- HEADER ----|............|
| <--------- Post content --------> |
| <---- FOOTER ----|............|
Here is the live example:
Version 1: http://myreadingmanga.info/wordpress/?p=1588 [Image is bigger than the window size]
Version 2: http://myreadingmanga.info/wordpress/?p=1603 [Image fits the window]
In version 1, the Header and footer leave out the space and do not cover the whole window.
I need it to be dynamic so that it expands according to the image size. I couldn't get much help in other topics. So if you can help, it would be good.
Yes,I have inspect the whole css rules .Please remove the width:auto from the rule
body.single .content {
padding: 0 20px;
/*width: auto;*/
}
It works perfectly on my system
Use a wrapper-DIV:
<div id="holder">
<div id="header" style="width:100%"></div>
<div id="content">
<img src="...">
</div>
<div id="footer" style="width:100%"></div>
</div>`
Check it it works fine as your requirement!
Just add one extra property in the css entry rule
.entry {
background: none repeat scroll 0 0 #373737;
border-top: 5px solid #F15123;
box-shadow: 0 1px 3px 0 #141414;
width: 1500px;/* add this property*/
}
Follow the step by step shown in the images
Finally, I found out a solution. Just needed to add
body
{
position: absolute;
width: auto;
}
.site-inner, .wrap
{
max-width: none;
}