coding layout issues

[hbjr7]

I'm just trying to center things. Not much seems to work. Also my footer is floating above my images instead of staying at the bottom on my second page. Please help.

 

 

Trying to get text to the right of the image. It just seems to stay stuck underneath.

<div id="wrap">
    <div class="container">
        
            <div class="row">
            
                <h1>Something About Me</h1>
                
                
                <div class="col-xs-12 col-sm-6 col-md-4">
                    
                     
                    
                    <div id="maincontent"><img src="images/portraitpic.jpg"><p>I am a Graphic Designer and Illustrator residing in the Chicagoland area. 
                        I have my AA in Education, my BA in Fine Arts, and will be receiving my AA in Graphic Design next year.<br> 
                        I currently work full time as a graphic designer for a beer distribution company. </p>
                    </div>
                    
    
                    
                          </div>

                </div>
            </div>
            <div id="footer"><p class="copyfooter">Copyright ©2016 HBA</p></div>
            
        </div>
 

#maincontent {
    max-height: inherit;
    max-width: 100%;
    align-content: center;
   
    
    
}
 

   
    h1 {
        color: #999999;
        font-size: 3.0em;
        font-weight: 700;
        text-align: center;
        margin-top: 100px;
        margin-bottom: 60px;
   
        
    }

    p {
        
    color: #999999;
    text-align: left;
    font-size: 1.8em;
    line-height: normal;
    float: right;
    
    
    
}

clear {
    clear: both;
}

#footer {
    width: 100%;
    height: 40px;
    background-color: rgb(153, 51, 255);
    position: relative;
    margin-top: 100px;
    padding-right: 20px;
 
    
    
}

  .copyfooter {
        font-family: 'Myriad', sans-serif;
        color: white;
        font-size: 14px;
        font-weight: 500;
        text-align: center;
        padding-top: 20px;
      
      
}

    #wrap {
        min-width: inherit;
          
    
}
 

 

 

 

[T3X4S]

I dont know about your spacing issues - but I can tell you that you need to re-word your text.

I am a Graphic Designer and Illustrator residing in the Chicagoland area. 
                        I have my AA in Education, my BA in Fine Arts, and will be receiving my AA in Graphic Design next year.<br> 
                        I currently work full time as a graphic designer for a beer distribution company.

Would sound better, and be "more" grammatically acceptable as:

I am a graphic designer and illustrator in the Chicago metropolitan area.
I have already earned my BA in Fine Arts, as well as an AA in Education.  In addition, I am currently working towards earning my third degree, an AA in Graphic Design.
Furthermore, I am employed full time as a graphic designer with a beer distribution company.

It may not get you more hits, but it sounds better.  You never want to say "i got my degree" or "I have my degree" - always try to say/use  "I earned my degree"
Oh... and never use the word "that" - it is the only word in the english language that is either completely unnecessary in the sentence, or can be replaced with something better.


Just a tip - but I dont know crap about coding.   sorry

 

[hbjr7]

That's ok about not knowing coding, I appreciate the help with my grammar. Thank you!

[Jose_49]

Hi! I got a question, do you want the image to stay at the right all the times?

[Jose_49]

<div id="wrap">
    <div class="container">

        <div class="row">

            <h1>Something About Me</h1>
            <div class="col-md-6">
                <div id="maincontent">
                    <p>
                        I am a Graphic Designer and Illustrator residing in the Chicagoland area.
                        I have my AA in Education, my BA in Fine Arts, and will be receiving my AA in Graphic Design next year.<br>
                        I currently work full time as a graphic designer for a beer distribution company.
                    </p>
                </div>
            </div>
                <div class="col-md-6">

                    <img src="images/portraitpic.jpg">
                </div>
            



        </div>

    </div>
</div>
<div id="footer"><p class="copyfooter">Copyright ©2016 HBA</p></div>

        

Try this, and let me know.

[Jose_49]

Here's the thing:

This line in here:

<div class="col-xs-12 col-sm-6 col-md-4">

 

How bootstrap works is in the following way: You have a grid system, which is measured in 12 columns (that's why you see the numbers after the xs, sm, and md; they go from 1 - 12). Each column has a defined spacing (usually in %).

 

http://getbootstrap.com/css/#grid

 

For you to work with the grid system you need to define a row, which you did:
 

<div class="row">
</div>

 

Then, inside that div or section, you then do the following:
 

<div class="row">
  <div class="col-md-6">
    50% of the content will come here
  </div>
  <div class="col-md-6">
    50% of the other part of the content will come here.
  </div>
</div>

The "col-md-" prefix means that the column will "break" or will convert to row when certain criteria is met (In reality it works the other way around, but don't worry about it), and that criteria is in the picture below (which I got from the link above).

This means that when the window is equal or higher than 970px it will be two columns as you have it right now. But, when it is smaller than that, it will convert into two rows.

 

 

If you need to have it more clarified let me know!

BTW, welcome to the forums

[hbjr7]

Thank you!