Reputation: 547

CSS: How to make a right layout?

So I'm here trying to figure out to make my layout as wanted. I will start by tell you my idea before heading to the problem.

So i'm trying to make something like this right now:

and this is how it looks right now:

So we can say we are pretty close but as you guys can see so are the Title, vote release attributes pretty close to the image and I just want it to have a space between them, problem is it didn't work with margin, margin-left/right, positions and some few more and I just can't figure it out. I was thinking maybe my JS is doing this because I'm using this:

$('#title').html("Title: " + data.title);

where the Title: maybe cause it? However i'm not quite sure if I did the right things yet. I have done this in my CSS:

`#title{
    margin: 15px;
    font-size:15px;
    padding: 5px;
}
#release {
    font-size:15px;
    padding: 5px;
}
#vote {
    font-size:15px;
    padding: 5px;
}
#overview {
    font-size:15px;
    padding: 5px;
}
#poster {
    float: left;
    width: 250px;
    height: 450px;  
}
#trailer {      
}`

So the things i'm not quite sure about is the Poster and the description. I'm not sure if its right to do it with float: left; maybe it will cause it for later on if a overview has really much information, I think the text would go below the picture which will look really bad. and the second is that I just want to make a space between the picture and the description as I describe before.

So if needing more code or information, just tell me and I will response quite fast.

EDIT: I haven't done the Youtube embed yet since I haven't learned to do it yet. So this will probably be later on in my mini-project. But it would be nice to make a position already so I don't have to worry about it later.

EDIT 1.2:

<aside id="title"></aside>
<aside id="release"></aside>
<aside id="vote"></aside>
<aside id="overview"></aside>
<aside id="resultsDiv"></aside>
<aside id="poster"></aside>
<aside id="trailer"></aside>

CSS:

aside {
    float : left;
    margin-left: 20px; 
}

EDIT 1.3:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>MovieTrailerbase</title>

<link rel="stylesheet" type="text/css" href="styles.css" />

</head>

<body>

<div id="page">

    <h1>Movie Search</h1>

    <form id="searchForm" method="post">
        <fieldset>

            <input id="s" type="text" />

            <input type="submit" value="Submit" id="submitButton" />

            <div id="searchInContainer">
                <input type="radio" name="check" value="site" id="searchSite" checked />
                <label for="searchSite" id="siteNameLabel">Search movie</label>

                <input type="radio" name="check" value="web" id="searchWeb" />
                <label for="searchWeb">Search series</label>
            </div>

        </fieldset>
    </form>
<aside id="title"></aside>
<aside  id="release"></aside>
<aside id="vote"></aside>
<aside  id="overview"></aside>
<aside id="resultsDiv"></div>
<aside id="poster"></aside>
<aside id="trailer"></aside>
</div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="script.js"></script>


</html>

EDIT LAST:

Got it to work with this:

http://codepen.io/anon/pen/NGyNQY?editors=110

Thank you everyone!

Upvotes: 2

Answers (4)

Ron van der Heijden

Reputation: 15080

You should look at your design like it is a table.

+--------------------------------+
| input                 | button |
+------------+-------------------+
|            |                   |
| poster     | content           |
|            |                   |
|            |                   |
|            |                   |
+------------+-------------------+
|                                |
|           video                |
|                                |
+--------------------------------+

If we only look at the rows, you see we have 3 rows.

In HTML we will have something like:

<div class="header"></div>
<div class="main"></div>
<div class="youtube"></div>

In header we have the input and button. In main we get the image and content And the youtube video is in the row below.

<div class="header">
    <input class="input" />
    <button class="button">button</button>
</div>
<div class="main">
    <div class="poster"></div>
    <div class="content"></div>
</div>
<div class="youtube"></div>

Include some CSS using floats to align the image and content and give the content a little margin as space between the image like so:

.poster {
    float: left;
}
.content {
    float: left;
    margin-left: 10px;
}

You can see a working solution here: http://jsfiddle.net/ubrdxnuw/

Upvotes: 2

the_velour_fog

Reputation: 2184

Here is a basic fix based on the code youve provided us, which is obviously not the code youve used as per your question - and was missing content so I have put some placeholder content into a working demo - http://codepen.io/anon/pen/JYpXeP?editors=110

Your CSS seemed ok , you just need to wrap the info in a div (I have created a div with class="info") that was on the same level as the <aside id="poster"> element - then target your floats against those two elements, and then the info , title etc are child elements inside the div.info

Upvotes: 1

bool3max

Reputation: 2865

Wrap your #title, #vote, #release, and #overview in an <aside> tag and float it to the left:

HTML:

<aside>
    <div id="title"</div>
    <div id="vote"</div>
    <div id="title"</div>
    <div id="overview"</div>
</aside>

CSS:

aside {
    float: left;
}

Then you can add a left margin to the <aside> container:

aside {
    float : left;
    margin-left: 20px; //Or how much do you actually want;
}

Upvotes: 1

Florin Pop

Reputation: 5135

Personally what I would do is adding all the content that is in the right of the poster (title, vote, release, etc) in a container that is floated left like the poster.

After that you can use margin-left: 20px (for example) for that container that holds those items. And this should work.

Upvotes: 1

CSS: How to make a right layout?

Answers (4)

Related Questions