I have two divs, wrapped inside a bigger div. I need to stack them next to each other rather than have them display as blocks that they typically do. I followed suggestions on similar stackoverflow questions and floated the first inner div to the left and floated the 2nd inner div to the right. No success.
I floated both inner div's to left and set overflow:hidden to the wrapper div. No success. I also, set both the inner div display's to an inline-block type. No success. They all stack over each other and this is not what I want.
Here is the semantic markup along with the CSS:
<div align="left" style="border:2px dotted #fff;margin-top:5px;">
<!-- <span class="hyperlink_message">This is the message, redundant</span> -->
<div class="hyperlink preview" style=";padding-top:8px;border:1px solid #bbc5ee;">
<div style="float:left;">
<a href="https://www.facebook.com/parijat" target="_blank">
<img src="https://sphotos-b.xx.fbcdn.net/hphotos-ash4/395790_10150612393596211_887151733_n.jpg" alt="image not found" style="width:100px;height:100px;border:solid 1px gray;margin-right:5px;" ></img>
</a>
</div>
<div style="float:left;">
<div style="font-size:12px;color:black;"><b>My Facebook page</b></div>
<div style="font-size:10px;color:gray;">www.facebook.com</div>
<div style="padding-top:5px;font-size:10px;color:gray;">Facebook is a social utility that connects people with friends and others who work, study and live around them. People use Facebook to keep up with friends, upload an unlimited number of photos, post links and videos, and learn more about the people they meet.</div>
</div>
<div style="clear: both"></div>
</div>
</div>
(please excuse the CSS styles included along with the markup, dabbling with some terrible legacy code at the moment.
And the corresponding JSFiddle.
http://jsfiddle.net/hpTym/
What do you guys think is going wrong here?
Set a width for the floating divs, or do you need them to float without specific width?
Related
I’m experiencing two issues with a bootstrap layout on a website that I’m building and I’m wondering if someone can point out where I’m going wrong. I have put my site live on a sub domain so that you can see the issue I am facing. It can be found here http://cefn.mywebsitebuild.co.uk//fixtures-results/first-team/
Issue one
The col-xs-12 fix-result div is floating outside the container and im unsure why. I also want this to align with the image see green line on my image
Issue two
The col-xs-12 match-sponsor div is also floating outside the container and I’m unsure why
I have uploaded my page source http://www.bootlint.com/ and its tells me that there are problems with your code.
Can someone please tell me what I can do to get this working?
Thanks
Paul
You may not want to adjust div's for that one image. I would strongly recommend to leave current bootstrap settings. Instead if you want to fill div with that image, add this attribute to parent div of that image.This way image would be aligned with rest of your divs.
style="
padding: 0px 0px;
"
You nest your rows differently. This is the easiest fix:
<!-- This is your very first row -->
<div class="row">
<div class="col-md-12">
<div class="row"> <!-- INSERT ROW HERE -->
<h4 class="heading-mini">First Team Fixtures & Results</h4>
<img src="/media/1014/img_5507.jpg?crop=0,0.24305557250976545,0.0000000000000007579122514774,0.33194442749023489&cropmode=percentage&rnd=131162832050000000" class="img-responsive team-photo" alt="" title="">
<p class="photo-names">Back row (left to right): Paul Griffiths, Nathan Williams, Sam Roberts, Oliver Davies, Jamie Rawlinson</p>
</div> <!-- END ROW HERE -->
</div>
</div>
However, I wouldn't go so far to say that it's the best fix... sorry. (I would opt for removing a nested row/columns everywhere else... )
Issue 2 is the same thing. (Everywhere else you have nested row->col->row->col.)
Hi fixed this by adding the following to the parent row divs
<div class="row" style="margin-left:0px; margin-right:0px;">
The nested bootstrap validates and It now looks as i wanted (hope its correct)
I plan to create a class apply the margin fix and apply the class tto the parent row divs instead of using inline style.
Thanks
I took time to format a div tag for my main content and then I put that div inside a wrapper div. Well, when I went to add my logo to the site, everything shifted. The div that the logo was in seemed to have pushed the wrapper tag down. Being new to code, I'm trying to keep my design as clean as possible but it is falling apart. Any suggestions? Any help? In the fiddle, I started the HTML code where the img source, this was the image that -when added- pushed my content down.
Here is the fiddle
http://jsfiddle.net/569Gm/
<div id="logo">
<img src="images/logo/logo-vector.png" />
</div>
<div id="wrapper">
<div id="aboutus">
<p>We are a Hagerstown-based junk removal and moving service. Able to accomplish jobs both big and small, we accept residential, commerical, and industrial jobs. </p>
<p> </p>
<p>Active since 2014, we are a relatively new service looking to help as many people as possible. Visit our Facebook Page to stay posted on our recent works, job openings, special offers and more. </p>
</div>
<div id="scheduling">
<p>To schedule for a service, please provide the information listed
below and we will respond promptly.</p>
</div>
<div id="contactus">
<p>If you have any questions, comments, or concerns, our contact information is listed below.</p>
<p> </p>
<p>Phone: (443) 690 6421</p>
<p>Email: service#hagdustboy.com</p>
</div>
</div>
</body>
</html>
</div>
This is what my website looks like now that I added the logo.
http://www.pixentral.com/show.php?picture=1PYUTuzOhcbLcaoadEpTNk2qnm
Add float:left; to your #logo, and use clear:left; instead of clear:both;.
By adding float:left; & clear:left; the #wrapper will come inline with your logo.
See the Demo
Float your logo left "float: left;". Clear your logo left as well "clear: left;". As a general rule of thumb, anything in the flow of the page /not "absolutely" positioned will need to be floated in some form way or shape unless the "div" containing it is floated. A good way of remembering this is, anything composition related most likely needs to be floated. Float left, assuming your margins and paddings are "margin: 0" "padding:0" will snap your div to as far right or left as the width parameters allow. Floating is really how you build the flow of the page.
One of my website pages is current messed up. I'm having a hard time getting the biographies in for my crew of lovable misfits. Here is the webpage:
http://www.sampsonvision.com/about/
The code for this webpage can be found in the about folder in the website files inside this zip folder here:
https://drive.google.com/file/d/0B3ZPyNRv7C3hemJERHZYVWFtSDg/edit?usp=sharing
May you please help me fix the divs so that the pictures are all in a nice little column and the text is directly next to the image, telling the user all about that particular crew member? I don't want the elements going all over the place like you see in the sampsonvision.com page above.
Add an empty div to the end of each section with the class "clear".
<div class="jordansbio">
<div class="jordanpic">
<img src="images/jordanwhite.jpg" width="150" height="170">
</div>
<div class="jordaninfo">
<span class="jwhit">
<h2 align="center">Jordan White</h2>
<p>Testing, Testing, 1, 2, 3</p>
</span>
</div>
<div class="clear"></div>
</div>
Then add the following CSS style
.clear {
clear: both;
}
What you're facing is a very common issue encountered with using floats to position content. Basically with all of your elements floated, none of them are considered to have height and so the container itself has a height of 0.
http://www.quirksmode.org/css/clearing.html
I just started out using twitter bootstrap and so far I've had a nice experience.
I'm currently having some trouble with positioning some .well elements the way I'd like them to be. Basically, this is what I'd like to see them
But this is what I get
The second row is clearly overlapping the first one because the elements are floated and the row is not wrapped around the .well element. I tried to apply .clearfix class but sadly it did not fix this.
Here's the html I'm currently using
<div class="container">
<div class="row offset-top-large">
<div class="col-md-9">
<a href="#" class="well well-lg">
</a>
</div>
</div>
<div class="row offset-top">
<div class="col-md-9">
<a href="#" class="well well-lg">
</a>
</div>
</div>
</div>
The .offset-top classes just add additional margins to the rows
.offset-top-large{
margin-top:100px;
}
.offset-top{
margin-top:20px;
}
I know that I can fix this on my own by manipulating the css, like, removing the floats, for example, but my question is - can I do this (get the desired output) without adding any additional CSS and possibly breaking the bootstrap functionality (resizing to smaller screens etc.).
Edit
Sorry, I had posted the code with the wrong well size class - I have corrected it now and here is a fiddle displaying my problem - http://www.bootply.com/127620
Thanks!
Based on the html and css you provided, this has nothing to do with floats. The problem is that you only have link elements in your rows, which by default are inline elements. Inline elements don't take up any space in their container elements. Try adding display:block or display:inline-block to the well elements.
The update to your question doesn't change a lot, you just need to increase the margin to account for the larger well size.
Try this:
.offset-top-large{
margin-top:100px;
}
.offset-top{
margin-top:50px;
}
Note: bantroth is also correct, adding display:block to your a tags is another solution.
I'm working with vertically aligned items in a list that needs to work in IE7. I've been referencing code on this page which seems to work well cross browser.
I am experiencing an issue in IE7 where the first list item is not expanding to fit the width of the elements inside it. Below is a link to my code.
http://jsfiddle.net/grimmus/jUFMJ/
<ul>
<li>
<div class="outerContainer">
<div class="innerContainer">
<div class="element">
<a href="#">
To Verify
</a>
</div>
</div>
</div>
<div class="outerNumber">
<div class="innerNumber">
<div class="element">
<a href="#">
3903
</a>
</div>
</div>
</div>
</li>
<li>
<div class="outerContainer">
<div class="innerContainer">
<div class="element">To Authorize</div>
</div>
</div>
</li>
<li>
<div class="outerContainer">
<div class="innerContainer">
<div class="element">View Payments</</div>
</div>
</div>
</li>
<li>
<div class="outerContainer">
<div class="innerContainer">
<div class="element">To Submit/Modify</div>
</div>
</div>
</li>
</ul>
The items in the list will be dynamic so it's not really possible to assign a specific width to each LI.
Is anyone aware of a way i can make the list item expand to fit the child elements without a specific width ?
Well, you've got a whole stack of IE7-specific hacks in there (ie the * hacks), but to be honest, some of them are making things worse rather than better.
IE7 does have some CSS issues, and sometimes CSS hacks are justified, but I don't think what you're doing here is really helping.
I was able to get things working much better simply by disabling several of the bits of hacked CSS code.
For example, .items li .outerContainer .innerContainer .element a specifies position:absolute, but only for IE7. This completely changes how the element is positioned, and of course it goes wrong.
And .items li .outerContainer .innerContainer .element,.items li .outerNumber .innerNumber .element specifies top:-50%. This is what is pushing most of your content out of the top of their boxes. If I disable that, the content appears back in view. Not quite in the right place, but visible and usable.
So the first thing I would suggest that you do is remove all of your current IE7-hacks. They are breaking things, not making them better.
Removing those hacks will make your menu usable in IE7. It won't look perfect, but it will be usable. And personally I'd leave it at that. You say you need the site to work in IE7; it will work. It may not look quite as pretty as other browsers, but it will work.
If you really do need to get it pixel perfect in IE7, then yes, you may need a few IE7 hacks. Different ones to the ones you've already tried already though! You need to be a bit more subtle with them. Maybe just adjusting the padding-top on .element or something like that to move the text down to a more central position.
Hope that helps.
[EDITS] Further thoughts on how to resolve the problem...
You mention that padding-top is tricky because some elements go over two lines. This will indeed make it difficult to accurately pad all the elements using a single style. If you know in advance which ones will be longer, you could give them a different padding to the others, but I realise that this might be problematic.
Another angle you could take is Javascript. A small bit of javascript specifically to solve this problem just for IE7 would be fairly simple to achieve, and wouldn't need to have any effect on other browsers.
You could also consider using a JS polyfill library like ie9.js or Selectivizr, which try to fix some of the CSS issues and missing features in older versions of IE.