Solved

keep my div the same size as my nav menu and aligned under it using bootstrap

Posted on 2014-11-17
5
364 Views
Last Modified: 2014-11-18
I'm new to Bootstrap and am having difficulty aligning my div under my nav menu and keeping it there during a resize. is there any specific bootstrap classes I can do to achieve this?

The page in question can be found here. The white box with the intro text needs to be the same width as the navigation menu above it, as well as be aligned underneath it whenever the browser is being resized.

Thanks in Advance!
0
Comment
Question by:Big Monty
  • 3
  • 2
5 Comments
 
LVL 18

Accepted Solution

by:
Greg Alexander earned 500 total points
ID: 40450063
You could wrap the text and logo in a div with class of container (seems like you commented it out at one point) Then you would have to remove the CSS rules that give it the position absolute and the margin right of 18%.

<div class="container">

            <div class="row">
                <div class="col-lg-3 pull-left xtLogo">                   
                    <img src="img/logo.png" height="200" width="200" />
                </div>

                <div class="col-lg-9">
			            <div class="mainText pull-right">
					            <h1 class="text-center">Welcome to ExchangeTree.Org!</h1>
					            <p>
						            ExchangeTree facilitates the pursuit of passions, interests, and needs through exchange in your community. Barter goods, services, things 
						            you can teach, and things you can lend or share, with other trusted users.
					            </p>
				            <br />
			            </div>
                </div>
            </div>

        </div>

Open in new window


Then remove position: absolute and margin-right: 18% from the .mainText class.

Hope that helps!
0
 
LVL 33

Author Comment

by:Big Monty
ID: 40450138
thanks for the suggestion!

I tried what you said, got rid of the position and margin-right css rules, but it just pushed the box all the way to the left, and when I resized the browser, it didn't stay roughly under the nav nar. if I keep the margin-right at 18%, it aligns properly under the nav bar, but again, it doesn't resize accordingly when the browser is resized.

The container class, is that just a generic container? is it suppose to be responsive automatically (resize automatically), or does it have more attributes? I'm having a hard time finding documentation for the core classes in Boostrap that describes their attributes
0
 
LVL 33

Author Closing Comment

by:Big Monty
ID: 40450157
ignore my last response, it does work :) I had forgotten to hit save on my index.htm file, caffeine hasn't hit me yet :)

thanks again for the help, much appreciated! I may have a few more questions coming up if you're interested
0
 
LVL 18

Expert Comment

by:Greg Alexander
ID: 40450161
Great! I will keep an eye out for them.
0
 
LVL 33

Author Comment

by:Big Monty
ID: 40450852
posted another (simple I hope!) question if you're interested in having a look:

http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/CSS/Q_28564957.html
0

Featured Post

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Changing way home page shows 2 29
Best environment for cross platform web development? 5 44
Place text over image using CSS 6 43
Else condition 9 15
"In order to have an organized way for empathy mapping, we rely on a psychological model and trying to model it in a simple way, so we will split the board to three section for each persona and a scenario and try to see what those personas would Do,…
Developer portfolios can be a bit of an enigma—how do you present yourself to employers without burying them in lines of code?  A modern portfolio is more than just work samples, it’s also a statement of how you work.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.

785 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question